Cancel zerobased if axis.y.min/max specified - #454

10 years ago · 7ee85d696a
5 changed files with 63 additions and 14 deletions
--- a/c3.js
+++ b/c3.js
@ -964,7 +964,7 @@
            axis_y_label: {},
            axis_y_tick_format: undefined,
            axis_y_tick_outer: true,
-            axis_y_padding: undefined,
+            axis_y_padding: {},
            axis_y_ticks: 10,
            axis_y2_show: false,
            axis_y2_max: undefined,
@ -973,7 +973,7 @@
            axis_y2_label: {},
            axis_y2_tick_format: undefined,
            axis_y2_tick_outer: true,
-            axis_y2_padding: undefined,
+            axis_y2_padding: {},
            axis_y2_ticks: 10,
            // grid
            grid_x_show: false,
@ -1243,6 +1243,11 @@
        isAllPositive = yDomainMin >= 0 && yDomainMax >= 0;
        isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;

+        // Cancel zerobased if axis_*_min / axis_*_max specified
+        if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) {
+            isZeroBased = false;
+        }
+
        // Bar/Area chart should be 0-based if all positive|negative
        if (isZeroBased) {
            if (isAllPositive) { yDomainMin = 0; }
@ -1269,11 +1274,11 @@
            padding_top += lengths[1];
            padding_bottom += lengths[0];
        }
-        if (axisId === 'y' && config.axis_y_padding) {
+        if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
            padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength);
            padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength);
        }
-        if (axisId === 'y2' && config.axis_y2_padding) {
+        if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
            padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength);
            padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength);
        }
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/chart_area.html
+++ b/htdocs/samples/chart_area.html
@ -3,9 +3,16 @@
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
+    <h3>Zerobased</h3>
    <div id="chart1"></div>
+    <h3>Not zerobased because of axis.y.min</h3>
    <div id="chart2"></div>
+    <h3>Zerobased</h3>
    <div id="chart3"></div>
+    <h3>Not zerobased because of axis.y.min</h3>
+    <div id="chart4"></div>
+    <h3>+/- vaulues</h3>
+    <div id="chart5"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
@ -24,6 +31,22 @@

      var chart2 = c3.generate({
        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+          ],
+          type: 'area'
+        },
+        axis: {
+          y: {
+            min: 100,
+          }
+        },
+      });
+
+      var chart3 = c3.generate({
+        bindto: '#chart3',
        data: {
          columns: [
            ['data1', -300, -350, -300, 0, 0, 0],
@ -33,8 +56,24 @@
        }
      });

-      var chart3 = c3.generate({
-        bindto: '#chart3',
+      var chart4 = c3.generate({
+        bindto: '#chart4',
+        data: {
+          columns: [
+            ['data1', -300, -350, -300, 0, 0, 0],
+            ['data2', -130, -100, -140, -200, -150, -50]
+          ],
+          type: 'area'
+        },
+        axis: {
+          y: {
+            max: -100,
+          }
+        }
+      });
+
+      var chart5 = c3.generate({
+        bindto: '#chart5',
        data: {
          columns: [
            ['data1', -300, 350, -300, 0, 0, 0],
--- a/src/config.js
+++ b/src/config.js
@ -100,7 +100,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        axis_y_label: {},
        axis_y_tick_format: undefined,
        axis_y_tick_outer: true,
-        axis_y_padding: undefined,
+        axis_y_padding: {},
        axis_y_ticks: 10,
        axis_y2_show: false,
        axis_y2_max: undefined,
@ -109,7 +109,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
        axis_y2_label: {},
        axis_y2_tick_format: undefined,
        axis_y2_tick_outer: true,
-        axis_y2_padding: undefined,
+        axis_y2_padding: {},
        axis_y2_ticks: 10,
        // grid
        grid_x_show: false,
--- a/src/domain.js
+++ b/src/domain.js
@ -82,6 +82,11 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
    isAllPositive = yDomainMin >= 0 && yDomainMax >= 0;
    isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;

+    // Cancel zerobased if axis_*_min / axis_*_max specified
+    if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) {
+        isZeroBased = false;
+    }
+
    // Bar/Area chart should be 0-based if all positive|negative
    if (isZeroBased) {
        if (isAllPositive) { yDomainMin = 0; }
@ -108,11 +113,11 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
        padding_top += lengths[1];
        padding_bottom += lengths[0];
    }
-    if (axisId === 'y' && config.axis_y_padding) {
+    if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
        padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength);
        padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength);
    }
-    if (axisId === 'y2' && config.axis_y2_padding) {
+    if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
        padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength);
        padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength);
    }