Enable y axis padding as ratio - #251

11 years ago · 5988709d92
3 changed files with 74 additions and 7 deletions
--- a/c3.js
+++ b/c3.js
@ -1133,6 +1133,11 @@

        //-- Domain --//

+        function getAxisPadding(padding, key, defaultValue, all) {
+            var ratio = padding.unit === 'ratio' ? all : 1;
+            return isValue(padding[key]) ? padding[key] * ratio : defaultValue;
+        }
+
        function getYDomainMin(targets) {
            var ids = mapToIds(targets), ys = getValuesAsIdKeyed(targets), j, k, baseId, idsInGroup, id, hasNegativeValue;
            if (__data_groups.length > 0) {
@ -1223,12 +1228,12 @@
                padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
            }
            if (axisId === 'y' && __axis_y_padding) {
-                padding_top = isValue(__axis_y_padding.top) ? __axis_y_padding.top : padding;
-                padding_bottom = isValue(__axis_y_padding.bottom) ? __axis_y_padding.bottom : padding;
+                padding_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength);
+                padding_bottom = getAxisPadding(__axis_y_padding, 'bottom', padding, domainLength);
            }
            if (axisId === 'y2' && __axis_y2_padding) {
-                padding_top = isValue(__axis_y2_padding.top) ? __axis_y2_padding.top : padding;
-                padding_bottom = isValue(__axis_y2_padding.bottom) ? __axis_y2_padding.bottom : padding;
+                padding_top = getAxisPadding(__axis_y2_padding, 'top', padding, domainLength);
+                padding_bottom = getAxisPadding(__axis_y2_padding, 'bottom', padding, domainLength);
            }
            // Bar chart with only positive values should be 0-based
            if (hasBarType(yTargets) && !hasNegativeValueInTargets(yTargets)) {
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/axes_padding.html
+++ b/htdocs/samples/axes_padding.html
@ -0,0 +1,62 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+    <div id="chart2"></div>
+
+    <script src="http://d3js.org/d3.v3.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, 400, 150, 250],
+            ['data2', 300, 2000, 1000, 4000, 1500, 2500],
+          ],
+          axes: {
+            data2: 'y2'
+          }
+        },
+        axis: {
+          y: {
+            padding: {
+              top: 0.1,
+              bottom: 0.1,
+              unit: 'ratio'
+            }
+          },
+          y2: {
+            show: true,
+            padding: {
+              top: 200,
+              bottom: 200,
+            }
+          }
+        }
+      });
+
+      var chart2 = c3.generate({
+        bindto: '#chart2',
+        data: {
+          columns: [
+            ['data1', 3000, 20000, 10000, 40000, 15000, 25000],
+          ],
+        },
+        axis: {
+          y: {
+            padding: {
+              top: 0.1,
+              bottom: 0.1,
+              unit: 'ratio'
+            }
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>