Feature request: Grid lines over area fill

[Eesger]

In my case it would be great if I could get the gridlines on top of the area fills. Now the gridlines are behind the area fill. In some cases (at least in my case) it could make a chart better readable when the (horizontal) grid lines would be better visible by placing them OVER the fill (not BEHIND the fill).

• This topic was modified 7 years, 7 months ago by Eesger.
• This topic was modified 7 years, 7 months ago by Eesger.

[Vishwas R]

Eesger,

As of now we don’t have this feature. But you can work around by setting fillOpacity to 0.7 or 0.8 to make gridlines visible through dataPoints. Check this jsfiddle.

Another option is to place stripLines with showOnTop set to true, so that lines are shown on top of data. Check this jsfiddle.

[Eesger]

The fillOpacity is not an option in my case. Placing of the stripLines is a good idea. However, my Chart renders with an automatic grid line interval, I cannot detect the current (automatic) interval can I?

[Eesger]

It was a bit of programming, but I thought of a solution:

– use a stackedArea
– subtract the stacked value
– set fillOpacity of the base value to zerro
– custom toolTip (add the other value)

function makeStacked(stack,base) {
	if (stack.length != base.length) { alert('makeStacked: '+stack.length+' != '+base.length); return stack; }
	var stacked = [];
	for (var i = 0; i < stack.length; i++) {
		stacked[i] = stack[i];
		stacked[i].y = stack[i].y - base[i].y;
	}
	return stacked;
}

[Eesger]

I have the strangest thing now, since I am using ‘stackedArea’ I now have with a large dataset (and includeZero:false) that when a have a relative low value in the past and zoom in on a point “later in time” the “low value” is the low value of the complete dataset, not just of the zoomed part (so the zoom is now a bit messed up..).

I am working on quite a complex chart. But I’ll try to build a fiddle so you may be able to fix the bug