Highcharts Donutchart: Avoid Showing Duplicate Legend With Nested Charts

I am trying to represent nested data using Highcharts Donut Chart. The charts are generated quite well, however I am having some problems with displaying the legend. Data to be rep

Solution 1:

In the Highcharts you can only hide/show one series. In the pie chart, even you have legend item per slice, there still is just one series.

However, there is hope for you: you can overwrite method responsible for that:

(function (H) {
    var UNDEFINED;
    /**
     * Returns true if the object is not null or undefined. Like MooTools' $.defined.
     * @param {Object} obj
     */
    function defined(obj) {
        return obj !== UNDEFINED && obj !== null;
    }
    H.wrap(H.Legend.prototype, 'getAllItems', function (p) {
        var allItems = [],
            pointsForLegend = [];
        H.each(this.chart.series, function (series) {
            var seriesOptions = series.options;

            // Handle showInLegend. If the series is linked to another series, defaults to false.
            if (!H.pick(seriesOptions.showInLegend, !defined(seriesOptions.linkedTo) ? UNDEFINED : false, true)) {
                return;
            }

            if (series.legendItems) {
                // use points or series for the legend item depending on legendType
                allItems = allItems.concat(series.legendItems);
            } else if (seriesOptions.legendType === 'point') {
                H.each(series.data, function (e, i) {
                    if (e.showInLegend) {
                        pointsForLegend.push(e);
                    }
                })
                allItems = allItems.concat(pointsForLegend);
            } else {
                allItems = allItems.concat(series);
            }
        });
        return allItems;
    });
})(Highcharts);

Now, just set per point, if should be displayed or not:

 point.showInLegend: i // 0 == false, 1 == true

Demo for you: http://jsfiddle.net/a2sy9bgj/6/

Of course, there one thing remains: click on one legend probably should hide two slices. In such case, use legendItemClick and find corresponding points to hide them.