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_top = getAxisPadding(__axis_y_padding, 'top', padding, domainLength);
-                padding_bottom = isValue(__axis_y_padding.bottom) ? __axis_y_padding.bottom : padding;
+                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_top = getAxisPadding(__axis_y2_padding, 'top', padding, domainLength);
-                padding_bottom = isValue(__axis_y2_padding.bottom) ? __axis_y2_padding.bottom : padding;
+                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>