Assume axis.y.padding as pixels - #799

c3.js

@@ -1369,16 +1369,16 @@
             padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
         } else if (showVerticalDataLabel) {
             lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height');
-            padding_top += domainLength * (lengths[1] / $$.height);
-            padding_bottom += domainLength * (lengths[0] / $$.height);
+            padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
+            padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
         }
         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);
+            padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength);
+            padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength);
         }
         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);
+            padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
+            padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength);
         }
         // Bar/Area chart should be 0-based if all positive|negative
         if (isZeroBased) {
@@ -3233,7 +3233,15 @@
         } else {
             xPos = $$.hasType('bar') ? (points[2][0] + points[0][0]) / 2 : points[0][0];
         }
-        return d.value !== null ? xPos : xPos > $$.width ? $$.width - box.width : xPos;
+        // show labels regardless of the domain if value is null
+        if (d.value === null) {
+            if (xPos > $$.width) {
+                xPos = $$.width - box.width;
+            } else if (xPos < 0) {
+                xPos = 4;
+            }
+        }
+        return xPos;
     };
     c3_chart_internal_fn.getYForText = function (points, d, textElement) {
         var $$ = this,
@@ -3243,7 +3251,15 @@
         } else {
             yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);
         }
-        return d.value !== null ? yPos : yPos < box.height ? box.height : yPos;
+        // show labels regardless of the domain if value is null
+        if (d.value === null && !$$.config.axis_rotated) {
+            if (yPos < box.height) {
+                yPos = box.height;
+            } else if (yPos > this.height) {
+                yPos = this.height - 4;
+            }
+        }
+        return yPos;
     };
 
     c3_chart_internal_fn.setTargetType = function (targetIds, type) {
@@ -4315,9 +4331,19 @@
             .text($$.textForY2AxisLabel.bind($$));
     };
 
-    c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, all) {
-        var ratio = padding.unit === 'ratio' ? all : 1;
-        return isValue(padding[key]) ? padding[key] * ratio : defaultValue;
+    c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) {
+        if (!isValue(padding[key])) {
+            return defaultValue;
+        }
+        if (padding.unit === 'ratio') {
+            return padding[key] * domainLength;
+        }
+        // assume padding is pixels if unit is not specified
+        return this.convertPixelsToAxisPadding(padding[key], domainLength);
+    };
+    c3_chart_internal_fn.convertPixelsToAxisPadding = function (pixels, domainLength) {
+        var length = this.config.axis_rotated ? this.width : this.height;
+        return domainLength * (pixels / length);
     };
 
     c3_chart_internal_fn.generateTickValues = function (values, tickCount, forTimeSeries) {

spec/domain-spec.js

@@ -3,8 +3,6 @@ var describe = window.describe,
     it = window.it,
     beforeEach = window.beforeEach;
 
-var initDom = window.initDom;
-
 describe('c3 chart axis', function () {
     'use strict';
 
@@ -24,16 +22,8 @@ describe('c3 chart axis', function () {
     };
 
     beforeEach(function (done) {
-        if (typeof chart === 'undefined') {
-            initDom();
-        }
-        chart = window.c3.generate(args);
+        chart = window.initChart(chart, args, done);
         d3 = chart.internal.d3;
-        chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
-
-        window.setTimeout(function () {
-            done();
-        }, 10);
     });
 
     describe('axis.y.min', function () {
@@ -93,4 +83,34 @@ describe('c3 chart axis', function () {
 
     });
 
+    describe('axis.y.padding', function () {
+
+        it('should change axis.y.max to 1000', function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 10, 20, 10, 40, 15, 25],
+                        ['data2', 50, 40, 30, 45, 25, 45]
+                    ]
+                },
+                axis: {
+                    y: {
+                        padding: {
+                            top: 200,
+                            bottom: 200
+                        }
+                    }
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should be set properly when bigger than min of data', function () {
+            var domain = chart.internal.y.domain();
+            expect(domain[0]).toBeCloseTo(-9, -1);
+            expect(domain[1]).toBeCloseTo(69, -1);
+        });
+
+    });
+
 });

src/axis.js

@@ -315,9 +315,19 @@ c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
         .text($$.textForY2AxisLabel.bind($$));
 };
 
-c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, all) {
-    var ratio = padding.unit === 'ratio' ? all : 1;
-    return isValue(padding[key]) ? padding[key] * ratio : defaultValue;
+c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) {
+    if (!isValue(padding[key])) {
+        return defaultValue;
+    }
+    if (padding.unit === 'ratio') {
+        return padding[key] * domainLength;
+    }
+    // assume padding is pixels if unit is not specified
+    return this.convertPixelsToAxisPadding(padding[key], domainLength);
+};
+c3_chart_internal_fn.convertPixelsToAxisPadding = function (pixels, domainLength) {
+    var length = this.config.axis_rotated ? this.width : this.height;
+    return domainLength * (pixels / length);
 };
 
 c3_chart_internal_fn.generateTickValues = function (values, tickCount, forTimeSeries) {

src/domain.js

@@ -126,16 +126,16 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
         padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
     } else if (showVerticalDataLabel) {
         lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height');
-        padding_top += domainLength * (lengths[1] / $$.height);
-        padding_bottom += domainLength * (lengths[0] / $$.height);
+        padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
+        padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
     }
     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);
+        padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength);
+        padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength);
     }
     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);
+        padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
+        padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength);
     }
     // Bar/Area chart should be 0-based if all positive|negative
     if (isZeroBased) {

src/text.js

@@ -80,7 +80,15 @@ c3_chart_internal_fn.getXForText = function (points, d, textElement) {
     } else {
         xPos = $$.hasType('bar') ? (points[2][0] + points[0][0]) / 2 : points[0][0];
     }
-    return d.value !== null ? xPos : xPos > $$.width ? $$.width - box.width : xPos;
+    // show labels regardless of the domain if value is null
+    if (d.value === null) {
+        if (xPos > $$.width) {
+            xPos = $$.width - box.width;
+        } else if (xPos < 0) {
+            xPos = 4;
+        }
+    }
+    return xPos;
 };
 c3_chart_internal_fn.getYForText = function (points, d, textElement) {
     var $$ = this,
@@ -90,5 +98,13 @@ c3_chart_internal_fn.getYForText = function (points, d, textElement) {
     } else {
         yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);
     }
-    return d.value !== null ? yPos : yPos < box.height ? box.height : yPos;
+    // show labels regardless of the domain if value is null
+    if (d.value === null && !$$.config.axis_rotated) {
+        if (yPos < box.height) {
+            yPos = box.height;
+        } else if (yPos > this.height) {
+            yPos = this.height - 4;
+        }
+    }
+    return yPos;
 };