ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Angular: Area chart with different color for each point based on threshold

Hi, is it feasible to create a an area chart like this using Highcharts. https://ibb.co/WGmp8fx. I tried using zones with areaspline but that didn't meet my requirements. Any way to achieve this ?
edit: Here, 4H is the threshold and all area points less than 4 will have color A and above or equal to it will have color B.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Angular: Area chart with different color for each point based on threshold

Hello,

You can do something like that by using series.areaspline.zones with series.areaspline.zoneAxis set to 'x'.

Demo: https://jsfiddle.net/BlackLabel/a1r2mgx7/
API: https://api.highcharts.com/highcharts/s ... line.zones
https://api.highcharts.com/highcharts/s ... e.zoneAxis

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ctaneja
Posts: 22
Joined: Wed Aug 31, 2022 5:07 am

Re: Angular: Area chart with different color for each point based on threshold

Hi,
This is not what I want to achieve. The threshold is on y-axis that is the datetime axis. On the y-axis we have the months. If for a given month (say July), the value is greater than the target value (4, in this case) the color of that area point will be red and if its below the target, the color will be blue. The fiddle that you shared does the visual work but fails on the functionality requirements because I want the threshold the target value to be on y-axis. Refer to this image for more clarity and please let me know if there's a possible workaround. https://imgbb.com/WGmp8fx.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Angular: Area chart with different color for each point based on threshold

Hi,

I think this is the only way to achieve this even by using the monthly listed category. Just to account for this dynamically based on a certain value on the y-axis you can use the chart.events.load() callback function where you calculate the intersection points on the spline line. But such calculations are already beyond the scope of support on our forum. If you need help with your implementation, you can try to look for it on the more general forums like StackOverflow or contact the Black Label company that specializes in Highcharts custom projects. See official Black Label site: https://blacklabel.pl

Demo: https://jsfiddle.net/BlackLabel/x2oarqtc/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”