CODEWITHSUNDEEP
javascripthighcharts
Nate C
Nate C

Reputation: 1

Highcharts Treemap with multiple series: getting them all to show in legend

So I have 6 series I'm using in a single highcharts treemap chart where each series is it's own, smaller tree map. I can't get each of the names of the series to appear in the legend because the showInLegend property is a level above the data property.

I've tried two different configurations. First: series is set to my chartData variable, which looks like: [{ name: key, stack: key, id: key, showInLegend: true, color: colors[key], data: sliced }, {...}] And so forth. This gives me a single treemap chart with each series underneath the previous, aka they are stacked on top of each other.

If I combine them all into a single data array, I can get the proper chart format I'm looking for, where each individual series is grouped by color/parent and so forth. This was done using data-less data points, like so: { name, id, showInLegend, color }

and each of the other points then would be: { name parent value }

This large data array is then given to a series array that looks like: [{ type: 'treemap', layoutAlgorithm: 'squarified', data: dataArray from above, }]

Again, I want the chart to be multiple tree maps, not one jammed on top of the other. But i also need the legend to show all of those series' names

Upvotes: 0

Views: 1159

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You can use unofficial legendType: 'point' property and remove unnecessary elements in afterGetAllItems legend event:

var H = Highcharts;

H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
    e.allItems.splice(2, 6);
});

H.chart('container', {
    series: [{
        legendType: 'point',
        showInLegend: true,
        ...
    }]
});

Live demo: https://jsfiddle.net/BlackLabel/gp2qmvac/

API Reference: https://api.highcharts.com/highcharts/series.treemap.showInLegend

Docs: https://www.highcharts.com/docs/extending-highcharts

Upvotes: 1

Related Questions