CODEWITHSUNDEEP
javascriptjqueryhighcharts
John
John

Reputation: 634

highcharts groups of stacked columns

Starting from here http://jsfiddle.net/jlbriggs/TfvGp/ I want to add some more data, which will be stacked on the columns as you can see in that example, on top of each 'Series' I want to add another set of data, so when you hover Series 1 a label like: 

 `Series 1 

  val1: val1, 

  val2: val2`

will be displayed.

series: [{name: "S1",
    data: [7,12,16,32,64]
},{ name: "S2",
    data: [7,12,16,32,64]
},{ name: "S3",
    data: [7,12,16,32,64]
}]

The data that I want to add it should be added on top of each series, and it must be related to each series so, if I want to hide S1 the entire column should be hidden.

Upvotes: 0

Views: 784

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Okay, to connect series use linkedTo for series. To set stacking, use stacking:'normal' and for series use stack. And here is a result: http://jsfiddle.net/TfvGp/50/

About tooltip, there's no simple solution for it. In Highcharts you can show or all series in tooltip, or just one. You can't choose two series for it. The best solution will be to loop over all series in tooltip.formatter and display series values only for the same stack as hovered point, see docs. Happy coding ;)

Upvotes: 2

Related Questions