Add area.zerobased option - #360

10 years ago · 5b6b5a260d
4 changed files with 38 additions and 4 deletions
--- a/c3.js
+++ b/c3.js
@ -257,6 +257,9 @@
            __bar_width_ratio = getConfig(['bar', 'width', 'ratio'], 0.6),
            __bar_zerobased = getConfig(['bar', 'zerobased'], true);

+        // area
+        var __area_zerobased = getConfig(['area', 'zerobased'], true);
+
        // pie
        var __pie_label_show = getConfig(['pie', 'label', 'show'], true),
            __pie_label_format = getConfig(['pie', 'label', 'format']),
@ -1261,7 +1264,7 @@
                domainLength, padding, padding_top, padding_bottom,
                center = axisId === 'y2' ? __axis_y2_center : __axis_y_center,
                yDomainAbs, lengths, diff, ratio, isAllPositive, isAllNegative,
-                isZeroBased = (hasBarType(yTargets) && __bar_zerobased) || hasAreaType(yTargets),
+                isZeroBased = (hasBarType(yTargets) && __bar_zerobased) || (hasAreaType(yTargets) && __area_zerobased),
                showHorizontalDataLabel = hasDataLabel() && __axis_rotated,
                showVerticalDataLabel = hasDataLabel() && !__axis_rotated;
            if (yTargets.length === 0) { // use current domain if target of axisId is none
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -319,6 +319,12 @@
                Disable zero-based y domain
              </a>
            </div>
+            <div class="col-md-4">
+              <h3>Area</h3>
+              <a href="./samples/area_zerobased.html">
+                Disable zero-based y domain
+              </a>
+            </div>
          </div>
        </div>
      </div>
--- a/htdocs/samples/area_zerobased.html
+++ b/htdocs/samples/area_zerobased.html
@ -0,0 +1,25 @@
+<html>
+  <head>
+    <link href="/css/c3.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 1030, 1200, 1100, 1400, 1150, 1250],
+            ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
+          ],
+          type: 'area',
+        },
+        area: {
+          zerobased: false
+        }
+      });
+    </script>
+  </body>
+</html>