CODEWITHSUNDEEP
chartshighchartslinearea
luftikus143
luftikus143

Reputation: 1285

Highcharts to display area range and line chart with data from a CSV file

I would like to show a line chart with an area range. The data come from a CSV file.

1940/1/01,-0.07909, -0.1, 0.1
1940/2/01,-0.08183, -0.1, 0.1
1940/3/01,-0.0804, -0.1, 0.1
1940/4/01,-0.0799, -0.1, 0.1
1940/5/01,-0.0804, -0.1, 0.1
1940/6/01,-0.08111, -0.1, 0.1
1940/7/01,-0.08498, -0.1, 0.1
1940/8/01,-0.08403, -0.1, 0.1
1940/9/01,-0.08577, -0.1, 0.1
1940/10/01,-0.08265, -0.1, 0.1
1940/11/01,-0.07762, -0.1, 0.1
1940/12/01,-0.08243, -0.1, 0.1

(The range are fake values yet.)

I setup a fiddle here, in which somehow I guess that »series« part must be adapted. Somehow, in this section it must be specified that it needs to take the third and fourth column for the display: 

series: [{
    name: 'Temperature',
}, {
    name: 'Range',
    type: 'arearange',
    lineWidth: 0,
    linkedTo: ':previous',
    color: Highcharts.getOptions().colors[0],
    fillOpacity: 0.3,
    zIndex: 0,
    marker: {
        enabled: false
    }
}]

Thanks for any hints how this can be achieved.

Upvotes: 0

Views: 138

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to use seriesMapping property:

    data: {
        csv: document.getElementById('csv').innerHTML,
        seriesMapping: [{
            x: 0,
          y: 1
        }, {
            x: 0,
          low: 2,
          high: 3
        }]
    }

Live demo: https://jsfiddle.net/BlackLabel/vtgdwb4p/

API Reference: https://api.highcharts.com/highcharts/data.seriesMapping

Upvotes: 1

Related Questions