Highcharts Line Chart with multicolor area

0
votes

I am new to highCharts, I am trying to get a LineChart with Multicolored Area . I searched a lot on forums and even on stack overflow but didn't found any. Attached image format as what i want.

SampleImage

I tried this FiddleLink.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        series: [{
            name: 'USA',
            data: [10,20,30,null,40,50]
        }, {
            name: 'USSR/Russia',
            data: [null,null,30,66,40]
        },
         {
            name: 'INIA',
            data: [null,null,55,66,40]
        }]
    });
});

So if anyone helps me on this will be a great help for me.``

1
javascripthighcharts

1 Answers

1
votes

You should be able to achieve the wanted effect by using the plotBands feature.

Demo: http://jsfiddle.net/BlackLabel/zex0rgdu/

xAxis: {
  plotBands: [{
    color: '#FCFFC5',
    from: 0,
    to: 2
  }, {
    color: 'red',
    from: 2,
    to: 4
  }, {
    color: 'blue',
    from: 4,
    to: 5
  }],
},

API: https://api.highcharts.com/highcharts/xAxis.plotBands