Fix x grid height with padding.top - #903

c3.js

@@ -3488,7 +3488,7 @@
         xgridLine.append('text')
             .attr("text-anchor", "end")
             .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
-            .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
+            .attr('dx', -4)
             .attr('dy', -5)
             .style("opacity", 0);
         // udpate
@@ -3543,7 +3543,7 @@
             (withTransition ? lines.transition() : lines)
                 .attr("x1", config.axis_rotated ? 0 : xv)
                 .attr("x2", config.axis_rotated ? $$.width : xv)
-                .attr("y1", config.axis_rotated ? xv : $$.margin.top)
+                .attr("y1", config.axis_rotated ? xv : 0)
                 .attr("y2", config.axis_rotated ? xv : $$.height)
                 .style("opacity", 1),
             (withTransition ? texts.transition() : texts)

spec/grid-spec.js

@@ -83,6 +83,44 @@ describe('c3 chart grid', function () {
 
     describe('x grid lines', function () {
 
+        describe('with padding.top', function () {
+
+            it('should have correct height', function () {
+                args = {
+                    data: {
+                        columns: [
+                            ['data1', 30, 200, 100, 400],
+                        ]
+                    },
+                    grid: {
+                        x: {
+                            lines: [
+                                {value: 3, text: 'Label 3'}
+                            ]
+                        }
+                    },
+                    padding: {
+                        top: 50
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should show x grid lines', function () {
+                var lines = chart.internal.main.select('.c3-xgrid-lines .c3-xgrid-line'),
+                    expectedX1 = 593,
+                    expectedText = ['Label 3'];
+                lines.each(function (id, i) {
+                    var line = d3.select(this),
+                        l = line.select('line'),
+                        t = line.select('text');
+                    expect(+l.attr('x1')).toBeCloseTo(expectedX1, -2);
+                    expect(t.text()).toBe(expectedText[i]);
+                });
+            });
+
+        });
+
         describe('on category axis', function () {
 
             it('should update args', function () {

src/grid.js

@@ -91,7 +91,7 @@ c3_chart_internal_fn.updateGrid = function (duration) {
     xgridLine.append('text')
         .attr("text-anchor", "end")
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
-        .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
+        .attr('dx', -4)
         .attr('dy', -5)
         .style("opacity", 0);
     // udpate
@@ -146,7 +146,7 @@ c3_chart_internal_fn.redrawGrid = function (withTransition) {
         (withTransition ? lines.transition() : lines)
             .attr("x1", config.axis_rotated ? 0 : xv)
             .attr("x2", config.axis_rotated ? $$.width : xv)
-            .attr("y1", config.axis_rotated ? xv : $$.margin.top)
+            .attr("y1", config.axis_rotated ? xv : 0)
             .attr("y2", config.axis_rotated ? xv : $$.height)
             .style("opacity", 1),
         (withTransition ? texts.transition() : texts)