CODEWITHSUNDEEP
javascripthighcharts
Tab Gre
Tab Gre

Reputation: 57

Highcharts - In area chart how to use gradient color for multiple series?

Expect every series area has different gradient color.

Tried I have read through the Highcharts demos, get know how to fill one area series with gradient color:

fillColor: {
  liearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
  stops: [0, 'red'],
         [1, 'white']
}

but, I dont have any idea how to set different gradient color for each series area.

Because of my poor English, I upload two picture to make my question clear, and the right is the result I expected.

Screen Shot 2016-12-26 at 2.21.24 PM.png Screen Shot 2016-12-26 at 2.22.05 PM.png

Update: Thanks for @Alex Denisov, each series has different linearGradient color, but now The question is the point is under the color, especially the last one.

In one word, is it any possible to set linearGradient color each series independent, no cover.

1.png

Update: https://jsfiddle.net/TabGre/fyxqsq4L/1/

Upvotes: 2

Views: 3629

Answers (1)

Alex Denisov
Alex Denisov

Reputation: 254

You would include the fillColor for each series with the series data like so:

plotOptions: {
        area: {
            stacking: 'normal'
        }
    },

series: [{
        name: 'Series 1',
        data: [502, 635, 809, 947, 1402, 3634, 5268],
        lineWidth: 3,
        lineColor: 'rgba(58, 204, 188, 1)',
        marker: {
          lineWidth: 1,
          lineColor: 'rgba(58, 204, 188, 1)',
          fillColor: 'rgba(58, 204, 188, 1)'
        },
        fillColor: {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
                [0, 'rgba(58, 204, 188, 1)'],
                [1, 'rgba(255,255,255,.25)']
            ]
        },
    }, {
        name: 'Series 2',
        data: [106, 107, 111, 133, 221, 767, 1766],
        lineWidth: 3,
        lineColor: 'rgba(247, 106, 1, 1)',
        marker: {
          lineWidth: 1,
          lineColor: 'rgba(247, 106, 1, 1)',
          fillColor: 'rgba(247, 106, 1, 1)',
          symbol: 'circle'
        },
        fillColor: {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
                [0, 'rgba(247, 106, 1, 1)'],
                [1, 'rgba(255,255,255,.25)']
            ]
        },
    }]

Upvotes: 2

Related Questions