Custom grid lines should be optionally positioned above the chart

[rassie]

Even though grid lines are technically grids, they are mostly used as comparisons, in most cases also with labels on them. However, they are drawn together with the actual grids, which are positioned at the bottom of the z-stack. Therefore, labels and actual lines more often than not cannot be read. See fiddle for an example. In that fiddle, moving .c3-ygrid-lines manually to be a direct following sibling of .c3-axis-y2 places that guide at the visually correct position.

Putting those guides above the chart should be possible with a direct graph configuration.

[alwerner]

Is this possible, to promote optional grid lines above a chart? I also need this with an area chart.

[alwerner]

I tried this as a quick proof of concept, works with jQuery:

$( ".c3 .c3-chart" ).insertBefore( ".c3 .c3-grid" );

[masayuki0812]

Hi,

I think @alwerner is right, but it seems reasonable to add an option to control the z-stack of the grids. So, I introduced grid.lines.front option and now we can change the z-stack of grid lines (NOTE: this does not affect dotted xgrids and ygrids). The default of this option is true, so the grid lines should be displayed on the front of the chart as you reported.
Please try the latest code and let me know if something is wrong. Thanks.

[alwerner]

The grid.lines.front option is working as described. Thank you!

[rassie]

Updated fiddle, seems to work. Thanks!

[masayuki0812]

So I'll close this issue. Thanks!

[pnorth423]

I'd like to change this property after c3.generate is called.

I was trying to set chart.internal.config[grid_lines_front] = false, but changing that entry of the chart.internal.config object is not taking affect.

I also tried to implement a d3 version of the JQuery option proposed by @alwerner, would anyone have any idea how I could acheive this ? Any help appreciated, thanks in advance : )