Set value to range from another column

Question

I have 3 columns in my table

|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 used as the x-axis

The second column (percentage numbers) I use to visualize in the spline. The third column is the points (which I generated in the query to set the percentage for the second column). What I want is to change the color of the recommender (%) spline if the recommender points are less than 43 points, without showing the recommender points spline. I don’t know what to do now

This is the fiddle link:

https://jsfiddle.net/czmnra04/

Family members, please help

Answer 1

If you want to adjust the colors based on the data from the third column, using areas won't work here because they are based on the axes, which are generated based on the values ​​from the second column.

So, if you want to change the color of a specific point in the second column based on a custom value in the third column, you can use the chart.events.load() callback function, and use point.update() Method conditionally updates the color of all points.

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