Is it possible to differentiate with colors to represent the Speed Frequency into Area Chart of Highcharts?

Question

How to display data to represent high, medium & low range of values with three different colors with linear gradient in area chart in 'highcharts-react-official' ?

I have implemented speed & count to represent Speed Frequency in column chart which represents red color for speed in range of 0-20 & 101-120, yellow color for speed in range of 21-40 & 81-99 & green color for speed in range of 41-80.

Here, what I am expecting is, I have to represent this scenerio in area chart. What I should do?

Answer 1

To demonstrate a range of colors, it's best to use "zones". You can choose whether to display them vertically or horizontally by setting the zoneAxis property to 'x' or 'y'.

Example data:

Highcharts.chart('container', {
  series: [{
    type: 'areaspline',
    data: [50, 70, 100, 115],
    zoneAxis: 'y',
    zones: [{
        value: 20,
        color: '#ffff00',
      },
      {
        value: 40,
        color: '#ffff00',
      },
      {
        value: 80,
        color: '#00ff00',
      },
      {
        value: 99,
        color: '#ffff00',
      },
      {
        value: 120,
        color: '#ff6968', // Red color for the line
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, "rgba(255, 105, 104, 0.3)"], // Lighter red gradient start
            [0.1, "rgba(255, 105, 104, 0)"], // Transparent at the bottom
          ],
        },
      }
    ]
  }]
});

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

API Reference: https://api.highcharts.com/highcharts/series.areaspline.zones