Having an expandable legend item

Question

I'm having trouble finding anything related to that so I'm trying to get some insights here.

Is there a way to build a graph (any graph, but let's take a bar graph as an example) in way where part of the series items lay under 'Other', and on click on it, they expand? For example, In the following graph, having the circled items as part of 'Other', and only on click on it, expand it to be shown as in the picture. Notice that the example I gave is a static list of items, but in my case I can not rely

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Amounts of 15 Different Types of Fruits'
    },
    xAxis: {
        categories: ['Fruits']
    },
    yAxis: {
        title: {
            text: 'Amount'
        }
    },
    series: dataSeries 
    
});

Bar Graph Legend Items

I tried having a nested item list- didn't work. Searched documentation and didn't find any reference to that.

Answer 1

You can use linkedTo property to connect a couple of series. In the following example when you click Other in the legend it will show and hide a group of series gathered under Other series. I hope this is something you were looking for. Feel free to ask any further questions please!

API references: https://api.highcharts.com/highcharts/series.bar.linkedTo

Demo: https://jsfiddle.net/BlackLabel/rjc0p2xf/

 {
  name: 'Other',
  id: 'other',
  data: [4]
}, {
  name: 'Limes',
  linkedTo: 'other',
  data: [3]
}