Grouping Legends in Highcharts

highcharts, javascript

Solution

Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.

http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

updated example: http://jsfiddle.net/jlbriggs/6gw5P/2/

linkedTo:':previous'

Problem

I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar. can some one help me? ``` $(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Total fruit consumtion, grouped by gender' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of fruits' } }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'+ 'Total: '+ this.point.stackTotal; } }, plotOptions: { bar: { stacking: 'normal' } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'Joe', data: [3, 4, 4, 2, 5], stack: 'male' }, { name: 'Jane', data: [2, 5, 6, 2, 1], stack: 'female' }, { name: 'Janet', data: [3, 0, 4, 4, 3], stack: 'female' }] }); }); ``` I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.

Original source