Fix y padding for data label - #295

10 years ago · 9a67dce279
3 changed files with 69 additions and 8 deletions
--- a/c3.js
+++ b/c3.js
@ -1217,7 +1217,7 @@
                yDomainMax = isValue(yMax) ? yMax : getYDomainMax(yTargets),
                domainLength, padding, padding_top, padding_bottom,
                center = axisId === 'y2' ? __axis_y2_center : __axis_y_center,
-                yDomainAbs, widths, diff, ratio,
+                yDomainAbs, lengths, diff, ratio,
                showHorizontalDataLabel = hasDataLabel() && __axis_rotated;
            if (yTargets.length === 0) { // use current domain if target of axisId is none
                return axisId === 'y2' ? y2.domain() : y.domain();
@ -1234,11 +1234,15 @@
            }
            // add padding for data label
            if (showHorizontalDataLabel) {
-                widths = getDataLabelWidth(yDomainMin, yDomainMax, axisId);
+                lengths = getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width');
                diff = diffDomain(y.range());
-                ratio = [widths[0] / diff, widths[1] / diff];
+                ratio = [lengths[0] / diff, lengths[1] / diff];
                padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1]));
                padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
+            } else {
+                lengths = getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height');
+                padding_top += lengths[1];
+                padding_bottom += lengths[0];
            }
            if (axisId === 'y' && __axis_y_padding) {
                padding_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength);
@ -1806,17 +1810,17 @@
            }
            return false;
        }
-        function getDataLabelWidth(min, max, axisId) {
-            var widths = [], paddingCoef = 1.3;
+        function getDataLabelLength(min, max, axisId, key) {
+            var lengths = [0, 0], paddingCoef = 1.3;
            selectChart.select('svg').selectAll('.dummy')
                .data([min, max])
              .enter().append('text')
                .text(function (d) { return formatByAxisId(axisId)(d); })
                .each(function (d, i) {
-                    widths[i] = this.getBoundingClientRect().width * paddingCoef;
+                    lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
                })
              .remove();
-            return widths;
+            return lengths;
        }
        function getYFormat(forArc) {
            var formatForY = forArc && !hasGaugeType(c3.data.targets) ? defaultArcValueFormat : yFormat,
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/data_label.html
+++ b/htdocs/samples/data_label.html
@ -0,0 +1,57 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+
+    <script src="/js/d3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 500, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25],
+            ['data3', 250, 220, 210, 240, 215, 225]
+          ],
+          groups: [['data1', 'data2', 'data3']],
+          labels: true,
+          type: 'bar',
+        },
+        axis: {
+          rotated: true
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          x: 'x',
+          columns: [
+            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
+            ['data1', -190, 200, 190, null],
+          ],
+          type: 'bar',
+          labels: {
+            format: function (v, id) {
+                if (v === null) {
+                    return 'Not Applicable';
+                }
+                return d3.format('$')(v);
+            }
+          }
+        },
+        axis: {
+          x: {
+            type: 'categorized'
+          }
+        },
+      });
+
+    </script>
+  </body>
+</html>