CODEWITHSUNDEEP
highcharts
Riccardo Fachin
Riccardo Fachin

Reputation: 105

Highcharts area graph with fillColor changing color depending on the zone color?

I want to create a chart that will have a gradient of the colour of the tick under it as a region. It will change as it lands on a different data value with a different colour on the tick. The gradient will be from the tick colour to white. Here is how it should look:

Chart with fillColor changing with areas

I managed to create different zone colors using "highcharts zones" and to set up a filling gradient using " highcharts fillColor". Now I can't understand how to generate a different filling color for each area. This is my graph right now:

Chart with fillColor not working

And this is part of my code linked to the problem:

this.chartOptions = {
...
      plotOptions: {
        area: {
          pointStart: chartStart,
          fillColor: {
            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
            stops: [
              [0, 'red'],
              [1, 'white']
            ]
          }
        }
      },
      series: [
        {
          type: 'area',
          data: this.avgVoltageSeries,
          pointInterval: ticksTime,
          pointStart: chartStart,
          zones: [{
            value: this.fenceNodeConfiguration.criticalVoltage / 1000,
            color: 'red'
          }, {
            value: this.fenceNodeConfiguration.warningVoltage / 1000,
            color: 'orange'
          }, {
            color: '#009900'
          }],
        }]
    };

Do you know if there is a way to change the filling color based on the area color?

Upvotes: 0

Views: 2054

Answers (1)

lamtacvu
lamtacvu

Reputation: 685

You set the wrong zone, you have to set the zones with xAxis, not yAxis.

series: [
    {
      type: 'area',
      data: this.avgVoltageSeries,
      pointInterval: ticksTime,
      pointStart: chartStart,
      zones: [{
        value: (new Date(new Date().setHours(10,0,0,0))).getTime(), // you should change the time here
        color: 'red'
      }, {
        value: (new Date(new Date().setHours(12,0,0,0))).getTime(),// you should change the time here
        color: 'orange'
      }, {
        color: '#009900'
      }],
    }]

Upvotes: 1

Related Questions