c3js - Grid lines showing on top of content - c3

Question

I've been trying to make the x-axis grid lines to be behind the content of a c3js bar chart.
I toyed with z-index which didn't work. I tried with opacity which didn't work either.
Here is the JSFiddle with the code I was using.
https://jsfiddle.net/chaitanya81/rvhb0fy4/1/
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
columns: [
['x', 'M','T','W','TH','F','SA','SU'],
['revenue', 200, 300, 200, 400, 500, 700, 600.56]
],
type: 'bar'
},
color: {
pattern: ["#ff9900"]
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
grid: {
x: {
lines: [
{value: "M"},
{value: "T"},
{value: "W"},
{value: "TH"},
{value: "F"},
{value: "SA"},
{value: "SU"}
]
}
},
bar: {
width: {
ratio: 0.4
}
},
legend: {
hide: true
},
tooltip: {
contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
for (i = 0; i < data.length; i++) {
if (! (data[i] && (data[i].value || data[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(data[i].x) : data[i].x;
text = "<div id='tooltip' class='d3-tip'>";
}
value = valueFormat(data[i].value, data[i].ratio, data[i].id, data[i].index);
text += "<span class='value'>$" + value + "</span>";
text += "</div>";
}
return text;
}
},
transition: {
duration: 1000
}
});
Any one tried this with c3js charts?
Thanks in Advance.

Answer 1

You can set grid.lines.front to false
var chart = c3.generate({
bindto: '#chart',
data: {
...
},
grid: {
lines: {
front: false
}
}
});
https://jsfiddle.net/Yosephsol/bwu70xgq/

Answer 2

The grid line layer comes over the chart elements (bars) layer, and SVG the z-index is set by the order of the elements in the document.
You could use your regions to give the same effect. One way is
CSS
.border {
stroke: #000;
fill: transparent;
}
.whiteborder {
stroke: white;
fill: transparent;
}
Script
regions: [
{ axis: 'x', start: -0.5, end: 0, class: 'border' },
{ axis: 'x', start: -0.5, end: 1, class: 'border' },
{ axis: 'x', start: -0.5, end: 2, class: 'border' },
{ axis: 'x', start: -0.5, end: 3, class: 'border' },
{ axis: 'x', start: -0.5, end: 4, class: 'border' },
{ axis: 'x', start: -0.5, end: 5, class: 'border' },
{ axis: 'x', start: -0.5, end: 6, class: 'border' },
{ axis: 'x', start: -0.5, end: 6.5, class: 'whiteborder' },
],
The last line is to get rid of the top border (you can't style different borders of a rect differently - there's an alternative [hack] using stroke-dasharray, but it depends on the relative height and width of your regions)
Fiddle - https://jsfiddle.net/d611yq7x/