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_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
-            padding_bottom += domainLength * (lengths[0] / $$.height);
+            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_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength);
-            padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, 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_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
-            padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, 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) {
+    c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) {
-        var ratio = padding.unit === 'ratio' ? all : 1;
+        if (!isValue(padding[key])) {
-        return isValue(padding[key]) ? padding[key] * ratio : defaultValue;
+            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/data-spec.js

@@ -142,22 +142,603 @@ describe('c3 chart data', function () {
 
     describe('data.label', function () {
 
-        it('should update args to show data label', function () {
+        describe('with small values', function () {
-            args = {
+
-                data: {
+            it('should update args to show data label', function () {
-                    columns: [
+                args = {
-                        ['data1', 0.03, 0.2, 0.1, 0.4, 0.15, 0.250]
+                    data: {
-                    ],
+                        columns: [
-                    labels: true
+                            ['data1', 0.03, 0.2, 0.1, 0.4, 0.15, 0.250]
-                }
+                        ],
-            };
+                        labels: true
-            expect(true).toBeTruthy();
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have proper y domain', function () {
+                var domain = chart.internal.y.domain();
+                expect(domain[0]).toBeCloseTo(-0.02);
+                expect(domain[1]).toBeCloseTo(0.45);
+            });
+        });
+
+        describe('with positive values and null', function () {
+
+            describe('on not rotated axis', function () {
+
+                it('should update args', function () {
+                    args = {
+                        data: {
+                            columns: [
+                                ['data1', 190, 200, 190, null],
+                            ],
+                            type: 'bar',
+                            labels: {
+                                format: function (v) {
+                                    if (v === null) {
+                                        return 'Not Applicable';
+                                    }
+                                    return d3.format('$')(v);
+                                }
+                            }
+                        }
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(0, -1);
+                    expect(domain[1]).toBeCloseTo(227, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [67, 49, 67, 423],
+                        expectedXs = [74, 221, 368, 515];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(189, -1);
+                    expect(domain[1]).toBeCloseTo(201, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [375, 40, 375, 422],
+                        expectedXs = [6, 198, 391, 583];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+            });
+
+            describe('on rotated axis', function () {
+
+                it('should update args', function () {
+                    args.data.type = 'bar';
+                    args.axis = {
+                        rotated: true
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(0, -1);
+                    expect(domain[1]).toBeCloseTo(231, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [57, 163, 269, 375],
+                        expectedXs = [490, 516, 490, 4];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(188, -1);
+                    expect(domain[1]).toBeCloseTo(202, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [9, 147, 286, 424],
+                        expectedXs = [76, 526, 76, 4];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+            });
+
+        });
+
+        describe('with positive values and null', function () {
+
+            describe('on not rotated axis', function () {
+
+                it('should update args', function () {
+                    args = {
+                        data: {
+                            columns: [
+                                ['data1', -190, -200, -190, null],
+                            ],
+                            type: 'bar',
+                            labels: {
+                                format: function (v) {
+                                    if (v === null) {
+                                        return 'Not Applicable';
+                                    }
+                                    return d3.format('$')(v);
+                                }
+                            }
+                        }
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-227, -1);
+                    expect(domain[1]).toBeCloseTo(0, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [368, 387, 368, 12],
+                        expectedXs = [74, 221, 368, 515];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-201, -1);
+                    expect(domain[1]).toBeCloseTo(-189, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [58, 392, 58, 12],
+                        expectedXs = [6, 198, 391, 583];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+            });
+
+            describe('on rotated axis', function () {
+
+                it('should update args', function () {
+                    args.data.type = 'bar';
+                    args.axis = {
+                        rotated: true
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-232, -1);
+                    expect(domain[1]).toBeCloseTo(0, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [57, 163, 269, 375],
+                        expectedXs = [103, 78, 103, 526];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-202, -1);
+                    expect(domain[1]).toBeCloseTo(-188, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [9, 147, 286, 424],
+                        expectedXs = [511, 67, 511, 526];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+            });
+
+        });
+
+        describe('with positive and negative values and null', function () {
+
+            describe('on non rotated axis', function () {
+
+                it('should update args', function () {
+                    args = {
+                        data: {
+                            columns: [
+                                ['data1', -190, 200, 190, null],
+                            ],
+                            type: 'bar',
+                            labels: {
+                                format: function (v) {
+                                    if (v === null) {
+                                        return 'Not Applicable';
+                                    }
+                                    return d3.format('$')(v);
+                                }
+                            }
+                        }
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-243, -1);
+                    expect(domain[1]).toBeCloseTo(253, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [392, 43, 52, 215],
+                        expectedXs = [74, 221, 368, 515];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-243, -1);
+                    expect(domain[1]).toBeCloseTo(253, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [392, 40, 49, 212],
+                        expectedXs = [6, 198, 391, 583];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+            });
+
+            describe('on rotated axis', function () {
+
+                it('should update args', function () {
+                    args.data.type = 'bar';
+                    args.axis = {
+                        rotated: true
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-254, -1);
+                    expect(domain[1]).toBeCloseTo(260, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [57, 163, 269, 375],
+                        expectedXs = [69, 525, 513, 295];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-254, -1);
+                    expect(domain[1]).toBeCloseTo(260, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [9, 147, 286, 424],
+                        expectedXs = [67, 527, 515, 297];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+            });
+
         });
 
-        it('should have proper y domain', function () {
+        describe('with positive grouped values', function () {
-            var domain = chart.internal.y.domain();
+
-            expect(domain[0]).toBeCloseTo(-0.02);
+            describe('on non rotated axis', function () {
-            expect(domain[1]).toBeCloseTo(0.45);
+
+                it('should update args', function () {
+                    args = {
+                        data: {
+                            columns: [
+                                ['data1', 30, 200, 100, 500],
+                                ['data2', 50, 20, 10, 40],
+                                ['data3', 250, 220, 210, 240],
+                            ],
+                            groups: [['data1', 'data2', 'data3']],
+                            labels: true,
+                            type: 'bar',
+                        }
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(0, -1);
+                    expect(domain[1]).toBeCloseTo(885, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [385, 317, 370, 164],
+                        expectedXs = [74, 221, 368, 515];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-94, -1);
+                    expect(domain[1]).toBeCloseTo(884, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [344, 284, 331, 144],
+                        expectedXs = [6, 198, 391, 583];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+            });
+
+            describe('on rotated axis', function () {
+
+                it('should update args', function () {
+                    args.data.type = 'bar';
+                    args.axis = {
+                        rotated: true
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(0, -1);
+                    expect(domain[1]).toBeCloseTo(888, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [57, 163, 269, 375],
+                        expectedXs = [57, 150, 77, 363];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-87, -1);
+                    expect(domain[1]).toBeCloseTo(887, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [9, 147, 286, 424],
+                        expectedXs = [107, 192, 125, 386];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+            });
+
+        });
+
+        describe('with negative grouped values', function () {
+
+            describe('on non rotated axis', function () {
+
+                it('should update args', function () {
+                    args = {
+                        data: {
+                            columns: [
+                                ['data1', -30, -200, -100, -500],
+                                ['data2', -50, -20, -10, -40],
+                                ['data3', -250, -220, -210, -240]
+                            ],
+                            groups: [['data1', 'data2', 'data3']],
+                            labels: true,
+                            type: 'bar',
+                        }
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-885, -1);
+                    expect(domain[1]).toBeCloseTo(0, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [51, 118, 65, 272],
+                        expectedXs = [74, 221, 368, 515];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-884, -1);
+                    expect(domain[1]).toBeCloseTo(94, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [88, 149, 101, 288],
+                        expectedXs = [6, 198, 391, 583];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+            });
+
+            describe('on rotated axis', function () {
+
+                it('should update args', function () {
+                    args.data.type = 'bar';
+                    args.axis = {
+                        rotated: true
+                    };
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-894, -1);
+                    expect(domain[1]).toBeCloseTo(0, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [57, 163, 269, 375],
+                        expectedXs = [533, 440, 513, 230];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+
+                it('should update args', function () {
+                    args.data.type = 'line';
+                    expect(true).toBeTruthy();
+                });
+
+                it('should have y domain with proper padding', function () {
+                    var domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeCloseTo(-894, -1);
+                    expect(domain[1]).toBeCloseTo(94, -1);
+                });
+
+                it('should locate labels above each data point', function () {
+                    var texts = chart.internal.main.selectAll('.c3-texts-data1 text'),
+                        expectedYs = [9, 147, 286, 424],
+                        expectedXs = [480, 397, 462, 205];
+                    texts.each(function (d, i) {
+                        var text = d3.select(this);
+                        expect(+text.attr('y')).toBeCloseTo(expectedYs[i], -1);
+                        expect(+text.attr('x')).toBeCloseTo(expectedXs[i], -1);
+                    });
+                });
+            });
+
         });
 
     });

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') {
+        chart = window.initChart(chart, args, done);
-            initDom();
-        }
-        chart = window.c3.generate(args);
         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) {
+c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) {
-    var ratio = padding.unit === 'ratio' ? all : 1;
+    if (!isValue(padding[key])) {
-    return isValue(padding[key]) ? padding[key] * ratio : defaultValue;
+        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_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
-        padding_bottom += domainLength * (lengths[0] / $$.height);
+        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_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength);
-        padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, 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_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
-        padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, 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;
 };