How to add thresholds with specific ranges to a Highcharts graph?

I’m working on a Highcharts line chart where I need to add thresholds with specific ranges on the x-axis. I want certain areas of the chart to be colored based on these thresholds, Here are the details of my problem: I’ve used the zone configuration options in Highcharts to try to implement this, but I’m not getting the desired results. Here’s the code I’ve used so far:

Thresholds:

Threshold 1:
Value: 10°C
Range: from 100 meters to 500 meters (on the x-axis)

Threshold 2:
Value: 20°C
Range: from 600 meters to 2682 meters (on the x-axis)


I want to:

Color the area between 100 meters and 500 meters red if the temperature is above 10°C.
Color the area between 600 meters and 2682 meters red if the temperature is above 20°C.
Display dashed lines at the thresholds of 10°C and 20°C.




Highcharts.chart('container', {
title: {
text: 'Thermal Profile'
},
series: [
{
name: 'Temperature 0-10°C',
data: [
[0, 20.18], [1, 20.21], [2, 20.38], /* ... */ [99, 19.95] // Data filtered for temperatures below 10°C
],
color: '#83c081', // Color for temperatures < 10°C
zones: [
{
value: 10,
color: '#83c081'
}
]
},
{
name: 'Temperature 10-20°C',
data: [
[100, 10.5], [101, 11.2], /* ... */ [499, 19.8] // Data filtered for temperatures between 10°C and 20°C
],
color: '#dc0059', // Color for temperatures > 10°C and < 20°C
zones: [
{
value: 20,
color: '#dc0059'
}
]
},
{
name: 'Temperature 20-30°C',
data: [
[600, 21.5], [601, 22.0], /* ... */ [2682, 27.5] // Data filtered for temperatures between 20°C and 30°C
],
color: '#83c081', // Color for temperatures > 20°C
zones: [
{
color: '#83c081'
}
]
}
],
xAxis: {
title: {
text: 'Distance (m)'
},
categories: ["0", "550", "1100", "1650", "2150", "2682"]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [
{
color: '#dc0059',
dashStyle: 'Dash', // Dashed line
value: 10, // Threshold at 10°C
width: 2,
label: {
text: 'Threshold 10°C',
align: 'right'
}
},
{
color: '#dc0059',
dashStyle: 'Dash', // Dashed line
value: 20, // Threshold at 20°C
width: 2,
label: {
text: 'Threshold 20°C',
align: 'right'
}
}
]
},
tooltip: {
headerFormat: '<b>{point.x} m</b><br>',
pointFormat: 'Temperature: {point.y} °C'
}
});

Continue reading...