Javascript – 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'
  }
});