Nithyanantham
Posts: 6
Joined: Mon Mar 06, 2023 5:40 am

Custom chart - Fill colors in specific area

Hi Team,

Please guide me to draw below attached chart.
Chart.JPG
Chart.JPG (12.3 KiB) Viewed 151 times
Thanks
NIthy
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Custom chart - Fill colors in specific area

Hi,

Thanks for contacting us with your question!

For creating lines and background between two values on yAxis, plotBands and plotLines built-in properties come in handy. You can also color line based on it's values by using series.zones.

Take a look at this demo I've created for you: https://jsfiddle.net/BlackLabel/4qjc850b/.

I assume from your screenshot that you would like to fill area between lines in lower and upper bound of plotBand. Unfortunately, there isn't an easy way to achieve this, but you might find this topic useful, as it covers similar subject: viewtopic.php?t=32882#p115523.

References:
https://api.highcharts.com/highcharts/yAxis.plotBands
https://api.highcharts.com/highcharts/yAxis.plotLines
https://api.highcharts.com/highcharts/p ... ries.zones

Let me know if that was what you were looking for!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”