Fix inset legend step - #326

c3.js

@@ -184,8 +184,9 @@
         var __legend_show = getConfig(['legend', 'show'], true),
             __legend_position = getConfig(['legend', 'position'], 'bottom'),
             __legend_inset_anchor = getConfig(['legend', 'inset', 'anchor'], 'top-left'),
-            __legend_inset_x = getConfig(['legend', 'inset', 'x'], 0),
+            __legend_inset_x = getConfig(['legend', 'inset', 'x'], 10),
             __legend_inset_y = getConfig(['legend', 'inset', 'y'], 0),
+            __legend_inset_step = getConfig(['legend', 'inset', 'step']),
             __legend_item_onclick = getConfig(['legend', 'item', 'onclick']),
             __legend_item_onmouseover = getConfig(['legend', 'item', 'onmouseover']),
             __legend_item_onmouseout = getConfig(['legend', 'item', 'onmouseout']),
@@ -670,7 +671,17 @@
             return __legend_show ? isLegendRight || isLegendInset ? legendItemWidth * (legendStep + 1) : currentWidth : 0;
         }
         function getLegendHeight() {
-            return __legend_show ? isLegendRight ? currentHeight : isLegendInset ? (c3.data.targets.length * Math.max(20, legendItemHeight)) + 20 : Math.max(20, legendItemHeight) * (legendStep + 1) : 0;
+            var h = 0;
+            if (__legend_show) {
+                if (isLegendRight) {
+                    h = currentHeight;
+                } else if (isLegendInset) {
+                    h = __legend_inset_step ? Math.max(20, legendItemHeight) * (__legend_inset_step + 1) : height;
+                } else {
+                    h = Math.max(20, legendItemHeight) * (legendStep + 1);
+                }
+            }
+            return h;
         }
 
         //-- Scales --//
@@ -4581,7 +4592,7 @@
                         }
                     }
                     steps[id] = step;
-                    margins[step] = margin;
+                    margins[step] = isLegendInset ? 10 : margin;
                     offsets[id] = totalLength;
                     totalLength += itemLength;
                 }
@@ -4693,7 +4704,7 @@
                 .style('stroke', 'lightgray')
                 .style('stroke-width', 1)
                 .attr('height', getLegendHeight() - 10)
-                .attr('width', maxWidth);
+                .attr('width', maxWidth * (step + 1) + 10);
             }
 
             texts = legend.selectAll('text')

htdocs/samples/legend.html

@@ -7,13 +7,15 @@
     <div id="chart2"></div>
     <div id="chart3"></div>
     <div id="chart4"></div>
+    <div id="chart5"></div>
+    <div id="chart6"></div>
 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 
       var columns = [];
-      for (var i = 0; i < 30; i++ ) {
+      for (var i = 0; i < 28; i++ ) {
         columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i];
       }
 
@@ -39,13 +41,23 @@
         data: {
           columns: columns,
         },
+        legend: {
+          position: 'inset',
+        },
+      });
+
+      c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: columns,
+        },
         axis: {
           rotated: true,
         },
       });
 
       c3.generate({
-        bindto: '#chart4',
+        bindto: '#chart5',
         data: {
           columns: columns,
         },
@@ -56,6 +68,20 @@
           rotated: true,
         },
       });
+
+      c3.generate({
+        bindto: '#chart6',
+        data: {
+          columns: columns,
+        },
+        legend: {
+          position: 'inset'
+        },
+        axis: {
+          rotated: true,
+        },
+      });
+
     </script>
   </body>
 </html>