Coloring charts

Question

first of all, sorry for my English, I don't know if I can explain what I would like to do... I have this: https://jsfiddle.net/rp6b40ak/

            plotOptions: {
                areaspline: {
                    zones: [
                        {
                            value: -99.9,
                            color: '#be00be'
                        },
                        {
                            value: -40.0,
                            color: '#dc00dc'
                        },
                        {
                            value: -30.9,
                            color: '#e600ff'
                        }, etc.

I would like to make the chart area have the same color as the line above it. Currently, these are "stairs". If the value of 20 degrees is yellow, I would like the entire graph to be yellow at that point, green at 9 degrees, and so on. Second thing, I would like the chart to gradually lose its opacity, the further down, the lower the opacity, like here: https://www.highcharts.com/demo/highcharts/line-time-series like the weather on MSN.

I even tried to use AI, but without success, please help.

Answer 1

1. To color the space below the line in the line color, you should use zones for the xAxis. So you need to change the zoneAxis option to 'x' and change the values in the zones array. To get the gradient, you should use the fillColor property.

Docs: https://api.highcharts.com/highcharts/plotOptions.areaspline.zoneAxis https://api.highcharts.com/highcharts/plotOptions.areaspline.zones.fillColor

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

zoneAxis: 'x',
zones: [{
  value: 2,
  color: 'pink',
  fillColor: {
    linearGradient: {
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 1
    },
    stops: [
      [0, "rgba(255, 105, 104, 0)"],
      [1, "rgba(255, 105, 104, 0.3)"],
    ],
  },
}]

2. I think that in your case you want to define the zones for yAxis and then flip them, so the colors looks like they're defined for the xAxis. If that's the case then this demo might be helpful: https://jsfiddle.net/BlackLabel/nbvxfok3/

And here's your demo with flipZones function: https://jsfiddle.net/BlackLabel/89qa25z0/