Fix legend background for inset - #326

c3.js

@@ -3712,7 +3712,7 @@
         var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
         var withTransition, withTransitionForTransform;
         var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
-        var texts, rects, tiles;
+        var texts, rects, tiles, background;
 
         options = options || {};
         withTransition = getOption(options, "withTransition", true);
@@ -3854,13 +3854,13 @@
             .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegend)
             .attr('width', 10)
             .attr('height', 10);
+
         // Set background for inset legend
-        if ($$.isLegendInset && maxWidth !== 0) {
-            $$.legend.insert('g', '.' + CLASS.legendItem)
+        background = $$.legend.select('.' + CLASS.legendBackground + ' rect');
+        if ($$.isLegendInset && maxWidth > 0 && background.size() === 0) {
+            background = $$.legend.insert('g', '.' + CLASS.legendItem)
                 .attr("class", CLASS.legendBackground)
-                .append('rect')
-                .attr('height', $$.getLegendHeight() - 12)
-                .attr('width', maxWidth * (step + 1) + 10);
+                .append('rect');
         }
 
         texts = $$.legend.selectAll('text')
@@ -3886,6 +3886,12 @@
             .attr('x', xForLegend)
             .attr('y', yForLegend);
 
+        if (background) {
+            (withTransition ? background.transition() : background)
+                .attr('height', $$.getLegendHeight() - 12)
+                .attr('width', maxWidth * (step + 1) + 10);
+        }
+
         // toggle legend state
         $$.legend.selectAll('.' + CLASS.legendItem)
             .classed(CLASS.legendItemHidden, function (id) { return !$$.isTargetToShow(id); })
@@ -4288,7 +4294,7 @@
         return forHorizontal ? -(1 + left) : -(left - 1);
     };
     c3_chart_internal_fn.getAxisClipY = function (forHorizontal) {
-        return forHorizontal ? -20 : -4;
+        return forHorizontal ? -10 : -4;
     };
     c3_chart_internal_fn.getXAxisClipX = function () {
         var $$ = this;

src/clip.js

@@ -11,7 +11,7 @@ c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
     return forHorizontal ? -(1 + left) : -(left - 1);
 };
 c3_chart_internal_fn.getAxisClipY = function (forHorizontal) {
-    return forHorizontal ? -20 : -4;
+    return forHorizontal ? -10 : -4;
 };
 c3_chart_internal_fn.getXAxisClipX = function () {
     var $$ = this;

src/legend.js

@@ -107,7 +107,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
     var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
     var withTransition, withTransitionForTransform;
     var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
-    var texts, rects, tiles;
+    var texts, rects, tiles, background;
 
     options = options || {};
     withTransition = getOption(options, "withTransition", true);
@@ -249,13 +249,13 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegend)
         .attr('width', 10)
         .attr('height', 10);
+
     // Set background for inset legend
-    if ($$.isLegendInset && maxWidth !== 0) {
-        $$.legend.insert('g', '.' + CLASS.legendItem)
+    background = $$.legend.select('.' + CLASS.legendBackground + ' rect');
+    if ($$.isLegendInset && maxWidth > 0 && background.size() === 0) {
+        background = $$.legend.insert('g', '.' + CLASS.legendItem)
             .attr("class", CLASS.legendBackground)
-            .append('rect')
-            .attr('height', $$.getLegendHeight() - 12)
-            .attr('width', maxWidth * (step + 1) + 10);
+            .append('rect');
     }
 
     texts = $$.legend.selectAll('text')
@@ -281,6 +281,12 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
         .attr('x', xForLegend)
         .attr('y', yForLegend);
 
+    if (background) {
+        (withTransition ? background.transition() : background)
+            .attr('height', $$.getLegendHeight() - 12)
+            .attr('width', maxWidth * (step + 1) + 10);
+    }
+
     // toggle legend state
     $$.legend.selectAll('.' + CLASS.legendItem)
         .classed(CLASS.legendItemHidden, function (id) { return !$$.isTargetToShow(id); })