Accept category name as x value for grid lines - #800

c3.js

@@ -738,8 +738,14 @@
         return d ? this.x(d.x) : null;
     };
     c3_chart_internal_fn.xv = function (d) {
-        var $$ = this;
-        return Math.ceil($$.x($$.isTimeSeries() ? $$.parseDate(d.value) : d.value));
+        var $$ = this, value = d.value;
+        if ($$.isTimeSeries()) {
+            value = $$.parseDate(d.value);
+        }
+        else if ($$.isCategorized() && typeof d.value === 'string') {
+            value = $$.config.axis_x_categories.indexOf(d.value);
+        }
+        return Math.ceil($$.x(value));
     };
     c3_chart_internal_fn.yv = function (d) {
         var $$ = this,

spec/grid-spec.js

@@ -80,4 +80,52 @@ describe('c3 chart grid', function () {
         });
 
     });
+
+    describe('x grid lines', function () {
+
+        describe('on category axis', function () {
+
+            it('should update args', function () {
+                args = {
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', 'a', 'b', 'c', 'd'],
+                            ['data1', 30, 200, 100, 400],
+                        ]
+                    },
+                    axis: {
+                        x: {
+                            type: 'category'
+                        }
+                    },
+                    grid: {
+                        x: {
+                            lines: [
+                                {value: 3, text: 'Label 3'},
+                                {value: 'a', text: 'Label a'}
+                            ]
+                        }
+                    }
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should show x grid lines', function () {
+                var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
+                    expectedX1 = [515, 74],
+                    expectedText = ['Label 3', 'Label a'];
+                lines.each(function (id, i) {
+                    var line = d3.select(this),
+                        l = line.select('line'),
+                        t = line.select('text');
+                    expect(+l.attr('x1')).toBeCloseTo(expectedX1[i], -1);
+                    expect(t.text()).toBe(expectedText[i]);
+                });
+            });
+
+        });
+
+    });
+
 });

src/core.js

@@ -733,8 +733,14 @@ c3_chart_internal_fn.xx = function (d) {
     return d ? this.x(d.x) : null;
 };
 c3_chart_internal_fn.xv = function (d) {
-    var $$ = this;
-    return Math.ceil($$.x($$.isTimeSeries() ? $$.parseDate(d.value) : d.value));
+    var $$ = this, value = d.value;
+    if ($$.isTimeSeries()) {
+        value = $$.parseDate(d.value);
+    }
+    else if ($$.isCategorized() && typeof d.value === 'string') {
+        value = $$.config.axis_x_categories.indexOf(d.value);
+    }
+    return Math.ceil($$.x(value));
 };
 c3_chart_internal_fn.yv = function (d) {
     var $$ = this,