Grid line is not working for Bar chart in salesforce Visualforce page

Hi Team,
I using C3 chart library to build chart in a visualforce page. chart is loading fine, but grid lines are not showing for both x and y axis.

Below is my visualforce page code.
`

window.onload = function () {
$(document).find('svg').each(function(){
var svgHeight = $(this).attr("height"); var svgWidth = $(this).attr("width");
$(this).find("rect").each( function() { $(this).attr('width',svgWidth).attr('height',svgHeight); return false;});
});
};
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});


`

* **C3 version**: v0.4.20
* **D3 version**: 4.0
* **Browser**: Chrome 65.0.3325.162
* **OS**: MacOS 10.13.3

Reproduce the chart in the Visualforce page using the referenced CEFStaticResource assets, especially c3.min.js, d3.v3.min.js, and c3.min.css. Start with the c3.generate configuration and its grid.x and grid.y settings, then compare the behavior with the reported C3 v0.4.20 and D3 versions. Done means visible grid lines on both axes in the stated Chrome environment.

Written by the indexing model from the issue text.