Highcharts - Sunburst partition

Question

I would like to know the best approach to create a drill-down sunburst partition with Highcharts? My initial approach was to render all Series, and change the series on the fly according to the selected one (hiding the inner series and changing the size/innersize of the remaining).

But for donut pies im not able to hide them, i took the working sample for a pie and modified to donut to show you what do i mean: http://jsfiddle.net/abdPj/

var chart = new Highcharts.Chart({
    chart: {
        type : 'pie',
        renderTo: 'container'
    },

    xAxis: {
    },

    series: [{
        size: '30%',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }, {
        innerSize: '35%',
        size: '60%',
        data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]        
    }]
});


// the button action
$button = $('#button');
$button.click(function() {
    var series = chart.series[0];

    if (series.visible) {
        series.hide();
        $button.html('Show series');
    } else {
        series.show();
        $button.html('Hide series');
    }

});

Also not 100% sure that the size and innerSize can be changed on the fly, do i have to redraw all visible series everytime?

Answer 1

there is now a sunburst module that will do this for you http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/sunburst/

<script src="https://code.highcharts.com/modules/sunburst.js"></script>

Answer 2

I think you want to use point.setVisible(boolean) for that, see example: http://jsfiddle.net/Fusher/abdPj/2/