Highchart Set Values to zone from another column

Question

In my table i have 3 columns

|week | % |pts |
|:----|:--|:---|
|  1  |34 |37  |
|  2  |44 |21  |
|  3  |41 |67  |
|  4  |59 |135 |
|  5  |49 |102 |
|  6  |57 |11  |
|  7  |60 |4   |
|  8  |47 |53  |

The first column is using for the x-axis
The second column (percentage numbers) i use to visualise in a spline In the third column are the Points (which i generate in a query to set the percentage of the second column). What i want is to change the color of the Promoter (%) spline if the promoter points is < 43 pts. without to show the spline of Promoter Points. It is very tricky, do you have an idea?

Here the fiddle

https://jsfiddle.net/czmnra04/

Thanks in advance

Answer 1

If you want to condition the color based on the data in the 3rd column then using zones won't work here because they are based on the axis and the axis is generated from the values in your 2nd column.

So if you want to change the color based on the custom value from column 3 for specific points from column 2, you can use the chart.events.load() callback function with logic that conditionally updates the colors of all points using point.update() method.

chart: {
  events: {
    load: function() {
      const chart = this;

      chart.series.forEach(series => {
        series.data.forEach(point => {
          if (point.pts < 43) {
            point.update({
              color: 'red'
            })
          }
        })
      })
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/ydc3m45n/
API: https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update