Fix conflict

c3.js

@@ -3666,13 +3666,19 @@
 
     c3_chart_internal_fn.initLegend = function () {
         var $$ = this;
+        $$.legendHasRendered = false;
         $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
         if (!$$.config.legend_show) {
             $$.legend.style('visibility', 'hidden');
             $$.hiddenLegendIds = $$.mapToIds($$.data.targets);
+            return;
         }
         // MEMO: call here to update legend box and tranlate for all
         // MEMO: translate will be upated by this, so transform not needed in updateLegend()
+        $$.updateLegendWithDefaults();
+    };
+    c3_chart_internal_fn.updateLegendWithDefaults = function () {
+        var $$ = this;
         $$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
     };
     c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) {
@@ -3747,6 +3753,9 @@
         if (!config.legend_show) {
             config.legend_show = true;
             $$.legend.style('visibility', 'visible');
+            if (!$$.legendHasRendered) {
+                $$.updateLegendWithDefaults();
+            }
         }
         $$.removeHiddenLegendIds(targetIds);
         $$.legend.selectAll($$.selectorLegends(targetIds))
@@ -3986,6 +3995,7 @@
         $$.updateSvgSize();
         // Update g positions
         $$.transformAll(withTransitionForTransform, transitions);
+        $$.legendHasRendered = true;
     };
 
     c3_chart_internal_fn.initAxis = function () {

spec/legend-spec.js

@@ -151,4 +151,36 @@ describe('c3 chart legend', function () {
 
     });
 
+    describe('legend.show', function () {
+
+        it('should update args', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 130, 100, 200, 100, 250, 150]
+                    ]
+                },
+                legend: {
+                    show: false
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should not initially have rendered any legend items', function () {
+            expect(d3.selectAll('.c3-legend-item').empty()).toBe(true);
+        });
+
+        it('allows us to show the legend on showLegend call', function () {
+            chart.legend.show();
+            d3.selectAll('.c3-legend-item').each(function () {
+                expect(d3.select(this).style('visibility')).toBe('visible');
+                // This selects all the children, but we expect it to be empty
+                expect(d3.select(this).selectAll("*").length).not.toEqual(0);
+            });
+        });
+
+    });
+
 });

src/legend.js

@@ -1,12 +1,18 @@
 c3_chart_internal_fn.initLegend = function () {
     var $$ = this;
+    $$.legendHasRendered = false;
     $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
     if (!$$.config.legend_show) {
         $$.legend.style('visibility', 'hidden');
         $$.hiddenLegendIds = $$.mapToIds($$.data.targets);
+        return;
     }
     // MEMO: call here to update legend box and tranlate for all
     // MEMO: translate will be upated by this, so transform not needed in updateLegend()
+    $$.updateLegendWithDefaults();
+};
+c3_chart_internal_fn.updateLegendWithDefaults = function () {
+    var $$ = this;
     $$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
 };
 c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) {
@@ -81,6 +87,9 @@ c3_chart_internal_fn.showLegend = function (targetIds) {
     if (!config.legend_show) {
         config.legend_show = true;
         $$.legend.style('visibility', 'visible');
+        if (!$$.legendHasRendered) {
+            $$.updateLegendWithDefaults();
+        }
     }
     $$.removeHiddenLegendIds(targetIds);
     $$.legend.selectAll($$.selectorLegends(targetIds))
@@ -320,4 +329,5 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
     $$.updateSvgSize();
     // Update g positions
     $$.transformAll(withTransitionForTransform, transitions);
+    $$.legendHasRendered = true;
 };