CODEWITHSUNDEEP
highcharts
Brad Varey
Brad Varey

Reputation: 1

HighCharts: How Can I Use pointRange in a Chart With 2 Series?

I am drawing a chart which is used in avalanche risk evaluation and shows several characteristics of a snow profile. These include details of the various layers buried in the profile, showing both depth and resistance.

My approach has been to use a column chart set to inverted (bars didn't work), using the pointRange property to set the width of a column to represent the thickness of each layer. By setting groupPadding and pointPadding to 0 in plot options, the columns are stacked and so give a good visual representation of the layout of the snow profile.

The data variable used for this chart is....

var chart1ResistanceData = [
        {data: [{ x: 10, y: 120, }], pointRange: 20, color: 'NavajoWhite'},
        {data: [{ x: 40, y: 100, }], pointRange: 40, color: 'NavajoWhite'},
        {data: [{ x: 80, y: 120, }], pointRange: 40, color: 'NavajoWhite'},
        {data: [{ x: 140, y: 60, }], pointRange: 80, color: 'NavajoWhite'},
        {data: [{ x: 190, y: 80, }], pointRange: 20, color: 'NavajoWhite'},
        {data: [{ x: 215, y: 60, }], pointRange: 30, color: 'NavajoWhite'},
        {data: [{ x: 255, y: 80, }], pointRange: 50, color: 'NavajoWhite'},
        {data: [{ x: 290, y: 130, }], pointRange: 20, color: 'NavajoWhite'}];

...and so the series definition is...

 series: chart1ResistanceData,

But I need to overlay a second, simple line plot of temperature vs. height, so I need to change my series definition to an array.

This refuses to draw the first series...

series: [{
    data: chart1ResistanceData,
}, {
    data: chart1TemperatureData
}],

...presumably because "data:" is buried in the variable's definition.

If I change the data definition so it looks like this...

{x: 10, y: 120, pointRange: 20, color: 'NavajoWhite'}

...the series renders, but the pointRange values are ignored, all the columns are the same width, and there is spacing between columns.

Is there some way I can modify the series definition or data variable so that pointRange will work correctly in an inverted column chart that has 2 data series as well as 2 yAxis. (n.b. - because the chart is inverted, the y axis is now the horizontal axis.)

Upvotes: 0

Views: 113

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You already use multiple series, so you just need to add more of them. Example:

var chart1ResistanceData = [
    {data: [{ x: 10, y: 120, }], pointRange: 20, color: 'NavajoWhite'},
    ...
];

var chart1TemperatureData = [
    {data: [{ x: 10, y: 12, }], yAxis: 1, pointRange: 5, color: 'red'},
    ...
];

Highcharts.chart('container', { 
    ...,
    series: chart1ResistanceData.concat(chart1TemperatureData)
});

Live demo: http://jsfiddle.net/BlackLabel/w4vo6975/

Docs: https://www.highcharts.com/docs/chart-concepts/series

Upvotes: 0

Related Questions