Introduce grid.lines.front option - #462

c3.js

@@ -224,6 +224,9 @@
             .attr("clip-path", $$.clipPath)
             .attr('class', CLASS.chart);
 
+        // Grid lines
+        if (config.grid_lines_front) { $$.initGridLines(); }
+
         // Cover whole with rects for events
         $$.initEventRect();
 
@@ -982,6 +985,7 @@
             grid_y_lines: [],
             grid_y_ticks: 10,
             grid_focus_show: true,
+            grid_lines_front: true,
             // point - point of each data
             point_show: true,
             point_r: 2.5,
@@ -3051,8 +3055,6 @@
         if (config.grid_y_show) {
             $$.grid.append('g').attr('class', CLASS.ygrids);
         }
-        $$.grid.append('g').attr("class", CLASS.xgridLines);
-        $$.grid.append('g').attr('class', CLASS.ygridLines);
         if (config.grid_focus_show) {
             $$.grid.append('g')
                 .attr("class", CLASS.xgridFocus)
@@ -3060,9 +3062,17 @@
                 .attr('class', CLASS.xgridFocus);
         }
         $$.xgrid = d3.selectAll([]);
+        if (!config.grid_lines_front) { $$.initGridLines(); }
+    };
+    c3_chart_internal_fn.initGridLines = function () {
+        var $$ = this, d3 = $$.d3;
+        $$.gridLines = $$.main.append('g')
+            .attr("clip-path", $$.clipPath)
+            .attr('class', CLASS.grid + ' ' + CLASS.gridLines);
+        $$.gridLines.append('g').attr("class", CLASS.xgridLines);
+        $$.gridLines.append('g').attr('class', CLASS.ygridLines);
         $$.xgridLines = d3.selectAll([]);
     };
-
     c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
         var $$ = this, config = $$.config, d3 = $$.d3,
             xgridData = $$.generateGridData(config.grid_x_type, $$.x),
@@ -5035,6 +5045,7 @@
         texts: 'c3-texts',
         gaugeValue: 'c3-gauge-value',
         grid: 'c3-grid',
+        gridLines: 'c3-grid-lines',
         xgrid: 'c3-xgrid',
         xgrids: 'c3-xgrids',
         xgridLine: 'c3-xgrid-line',

htdocs/samples/grid_x_lines.html

@@ -15,7 +15,8 @@
         data: {
           columns: [
             ['data1', 30, 200, 100, 400, 150, 250]
-          ]
+          ],
+          type: 'bar'
         },
         grid: {
           x: {
@@ -39,7 +40,7 @@
           columns: [
             ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
             ['sample', 30, 200, 100, 400, 150]
-          ]
+          ],
         },
         axis : {
           x : {
@@ -53,6 +54,9 @@
                text: '2013/01/04',
                class: 'lineFor20130104'
             }]
+          },
+          lines: {
+            front: false
           }
         }
       });

src/class.js

@@ -44,6 +44,7 @@ var CLASS = c3_chart_internal_fn.CLASS = {
     texts: 'c3-texts',
     gaugeValue: 'c3-gauge-value',
     grid: 'c3-grid',
+    gridLines: 'c3-grid-lines',
     xgrid: 'c3-xgrid',
     xgrids: 'c3-xgrids',
     xgridLine: 'c3-xgrid-line',

src/config.js

@@ -121,6 +121,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         grid_y_lines: [],
         grid_y_ticks: 10,
         grid_focus_show: true,
+        grid_lines_front: true,
         // point - point of each data
         point_show: true,
         point_r: 2.5,

src/core.js

@@ -219,6 +219,9 @@ c3_chart_internal_fn.initWithData = function (data) {
         .attr("clip-path", $$.clipPath)
         .attr('class', CLASS.chart);
 
+    // Grid lines
+    if (config.grid_lines_front) { $$.initGridLines(); }
+
     // Cover whole with rects for events
     $$.initEventRect();
 

src/grid.js

@@ -9,8 +9,6 @@ c3_chart_internal_fn.initGrid = function () {
     if (config.grid_y_show) {
         $$.grid.append('g').attr('class', CLASS.ygrids);
     }
-    $$.grid.append('g').attr("class", CLASS.xgridLines);
-    $$.grid.append('g').attr('class', CLASS.ygridLines);
     if (config.grid_focus_show) {
         $$.grid.append('g')
             .attr("class", CLASS.xgridFocus)
@@ -18,9 +16,17 @@ c3_chart_internal_fn.initGrid = function () {
             .attr('class', CLASS.xgridFocus);
     }
     $$.xgrid = d3.selectAll([]);
+    if (!config.grid_lines_front) { $$.initGridLines(); }
+};
+c3_chart_internal_fn.initGridLines = function () {
+    var $$ = this, d3 = $$.d3;
+    $$.gridLines = $$.main.append('g')
+        .attr("clip-path", $$.clipPath)
+        .attr('class', CLASS.grid + ' ' + CLASS.gridLines);
+    $$.gridLines.append('g').attr("class", CLASS.xgridLines);
+    $$.gridLines.append('g').attr('class', CLASS.ygridLines);
     $$.xgridLines = d3.selectAll([]);
 };
-
 c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
     var $$ = this, config = $$.config, d3 = $$.d3,
         xgridData = $$.generateGridData(config.grid_x_type, $$.x),