Fix legend item width when multiple charts rendered - #1011

c3.js

@@ -3812,6 +3812,7 @@
 
     c3_chart_internal_fn.initLegend = function () {
         var $$ = this;
+        $$.legendItemTextBox = {};
         $$.legendHasRendered = false;
         $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
         if (!$$.config.legend_show) {
@@ -3919,9 +3920,8 @@
             .style('opacity', 0)
             .style('visibility', 'hidden');
     };
-    var legendItemTextBox = {};
     c3_chart_internal_fn.clearLegendItemTextBoxCache = function () {
-        legendItemTextBox = {};
+        this.legendItemTextBox = {};
     };
     c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         var $$ = this, config = $$.config;
@@ -3936,10 +3936,10 @@
         withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
 
         function getTextBox(textElement, id) {
-            if (!legendItemTextBox[id]) {
+            if (!$$.legendItemTextBox[id]) {
-                legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
+                $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
             }
-            return legendItemTextBox[id];
+            return $$.legendItemTextBox[id];
         }
 
         function updatePositions(textElement, id, index) {

spec/legend-spec.js

@@ -7,6 +7,45 @@ describe('c3 chart legend', function () {
         chart = window.initChart(chart, args, done);
     });
 
+    describe('legend when multiple charts rendered', function () {
+
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30],
+                        ['data2', 50],
+                        ['data3', 100]
+                    ]
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should update args with long data names', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['long data name 1', 30],
+                        ['long data name 2', 50],
+                        ['long data name 3', 50],
+                    ]
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should have properly computed legend width', function () {
+            var expectedLeft = [148, 226, 384],
+                expectedWidth = [118, 118, 108];
+            d3.selectAll('.c3-legend-item').each(function (d, i) {
+                var rect = d3.select(this).node().getBoundingClientRect();
+                expect(rect.left).toBeCloseTo(expectedLeft[i], -2);
+                expect(rect.width).toBeCloseTo(expectedWidth[i], -2);
+            });
+        });
+    });
+
     describe('legend position', function () {
 
         it('should update args', function () {

src/legend.js

@@ -1,5 +1,6 @@
 c3_chart_internal_fn.initLegend = function () {
     var $$ = this;
+    $$.legendItemTextBox = {};
     $$.legendHasRendered = false;
     $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
     if (!$$.config.legend_show) {
@@ -107,9 +108,8 @@ c3_chart_internal_fn.hideLegend = function (targetIds) {
         .style('opacity', 0)
         .style('visibility', 'hidden');
 };
-var legendItemTextBox = {};
 c3_chart_internal_fn.clearLegendItemTextBoxCache = function () {
-    legendItemTextBox = {};
+    this.legendItemTextBox = {};
 };
 c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
     var $$ = this, config = $$.config;
@@ -124,10 +124,10 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
     withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
 
     function getTextBox(textElement, id) {
-        if (!legendItemTextBox[id]) {
+        if (!$$.legendItemTextBox[id]) {
-            legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
+            $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
         }
-        return legendItemTextBox[id];
+        return $$.legendItemTextBox[id];
     }
 
     function updatePositions(textElement, id, index) {