We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Draw gridlines over areachart

I'm attempting to create a graph that looks like this:
Screen Shot 2022-12-20 at 10.38.22 AM.png
The only problem is the grid lines currently are drawing underneath the area graph instead of on top of it.
Here's what i get with this:

s implementation:

1 Reply

YG Yuvaraj Gajaraj Syncfusion Team December 21, 2022 05:49 PM UTC

Hi Hoa,

Greetings from Syncfusion.

Currently, we don't have direct support for rendering the chart grid lines above the series, but you can achieve this with the help of plotBand property in the axis. You can render multiple plot bands which will render the line horizontally when setting the plotBand property to the primaryYAxis. Here we have created the method buildPlotBand, it returns the list of PlotBand based on the maximum range of y-axis and interval value and set this list to plotBand property in the primaryYAxis. We have shared the sample below for your reference.




Attachment: i179542_bb061afb.zip

Live Chat Icon For mobile
Up arrow icon