CODEWITHSUNDEEP
highchartspercentagelinechart
Rob Audenaerde
Rob Audenaerde

Reputation: 20029

Highcharts percentage without stacking?

Is it possible to create a Highcharts chart with splines in percentages, but WITHOUT them stacking?

I would like to display lines in a relative view, but I would like them to be crossing when their percentages changes.

Basically, like this: http://jsfiddle.net/dp6pjeo9/5/ 

plotOptions: {
    series: {
        pointStart: 2010,
         stacking: 'percent'

    }
},

but without the lines 'stacking' behavior. Stacking is really inconvenient for lines because it is hard to tell whether they are 'absolute' values or 'stacked' values.

See here, the top line should be under then the black line in 2010.

enter image description here

Upvotes: 1

Views: 705

Answers (1)

morganfree
morganfree

Reputation: 12472

You need to process you data before you put them in the chart config.

Calculate sums:

var data = [3, 5, 10, 15,25]
var data2 = [25,15, 10, 5, 0]

var sum = data.map((v, i) => v + data2[i]) // grab sums

Calculate percentages and set data:

    series: [{
    name: 'Installation',
    data: data.map((v, i) => ({
      y: v / sum[i] * 100,
      absoluteY: v
    }))
}, {
    name: 'Manufacturing',
    data: data2.map((v, i) => ({
      y: v / sum[i] * 100,
      absoluteY: v
    }))
}]

Change tooltip's pointFormat so it shows absolute y value instead of percentage value

tooltip: {
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.absoluteY}</b><br/>'
},

example: http://jsfiddle.net/dp6pjeo9/6/

Upvotes: 2

Related Questions