title: Highcharts Resetting Drilldown (three layers) to Initial state
body: <p>I have a triple drilldown for my pie chart. I am trying to create a button that allows you to reset the entire chart to the original drilldown state. I took at a look at an old implementation that didn't have a drilldown and couldn't get it to work with my solution (see here <a href="https://stackoverflow.com/questions/10703325/resetting-highcharts-to-initial-state">Resetting Highcharts to initial state</a>).</p>
  
  <p>My current JSFiddle has what I tried to replicate using that thread. 
  You can see that here:<a href="http://jsfiddle.net/vsFLK/" rel="nofollow noreferrer">http://jsfiddle.net/vsFLK/</a></p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
  &lt;div id="pieContainer"&gt;&lt;/div&gt;
  &lt;br/&gt;
  &lt;a id="resetChart" href="#"&gt;Reset&lt;/a&gt;
  
           var chart;
    $(document).ready(function () {
        /*begin pie chart render*/
        var colors = Highcharts.getOptions().colors,
            categories = ['A', 'B', 'C'],
            level = 0,
            //name = 'Regions',
            data = [{
                name: 'B',
                y: 10,
                color: colors[0],
                drilldown: {
                    level: 1,
                    name: 'A',
                    color: colors[0],
                    data: [{
                        y: 7,
                        name: 'A',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300],
                                ['4', 400],
                                ['5', 500],
                                ['6', 600],
                                ['7', 700]
                            ]
                        }
                    }, {
                        y: 3,
                        name: 'B',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300]
                            ]
                        }
                    }]
                }
            }, {
                name: 'C',
                y: 34,
                color: colors[1],
                drilldown: {
                    level: 1,
                    name: 'C',
                    color: colors[1],
                    data: [{
                        y: 1,
                        name: 'A',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100]
                            ]
                        }
                    }, {
                        y: 7,
                        name: 'B',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300],
                                ['4', 400],
                                ['5', 500],
                                ['6', 600],
                                ['7', 700]
                            ]
                        }
                    }, {
                        y: 9,
                        name: 'C',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300],
                                ['4', 400],
                                ['5', 500],
                                ['6', 600],
                                ['7', 700]
                            ]
                        }
                    }, {
                        y: 3,
                        name: 'D',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300]
                            ]
                        }
                    }, {
                        y: 3,
                        name: 'E',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300], ]
                        }
                    }, {
                        y: 2,
                        name: 'F',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300], ]
                        }
                    }, {
                        y: 2,
                        name: 'G',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 300],
                                ['2', 200],
                                ['3', 100]
                            ]
                        }
                    }, {
                        y: 3,
                        name: 'H',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 300],
                                ['2', 200],
                                ['3', 100]
                            ]
                        }
                    }, {
                        y: 4,
                        name: 'I',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 300],
                                ['2', 200],
                                ['3', 100]
                            ]
                        }
                    }]
                }
            }, {
                name: 'A',
                y: 50,
                color: colors[2],
                drilldown: {
                    level: 1,
                    name: 'A',
                    color: colors[2],
                    data: [{
                        y: 2,
                        name: 'A',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200]
                            ]
                        }
                    }, {
                        y: 1,
                        name: 'C',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100]
                            ]
                        }
                    }, {
                        y: 53,
                        name: 'A',
                        drilldown: {
                            level: 2,
                            data: [
                                ['1', 100],
                                ['2', 200],
                                ['3', 300],
                                ['4', 400],
                                ['5', 500],
                                ['6', 600],
                                ['7', 700]
                            ]
                        }
                    }]
                }
            }]
  
            function setChart(name, categories, data, color) {
                //chart.xAxis[0].setCategories(categories);
                chart.series[0].remove();
                chart.addSeries({
                    name: name,
                    data: data,
                    pointPadding: -0.3,
                    borderWidth: 0,
                    pointWidth: 15,
                    shadow: false,
                    color: color || 'white'
                });
            }
  
        pieChart = new Highcharts.Chart({
            chart: {
                renderTo: 'pieContainer',
                type: 'pie',
                /* changes bar size */
                pointPadding: -0.3,
                borderWidth: 0,
                pointWidth: 10,
                shadow: false,
                backgroundColor: '#ffffff'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total Brand Value',
                    categories: categories
                }
            },
            //drilldown plot
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    allowPointSelect: false,
                    pointPadding: -0.3,
                    borderWidth: 0,
                    pointWidth: 15,
                    shadow: false,
                    point: {
                        events: {
                            click: function () {
                                var chart = this.series.chart,
                                    drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    chart.setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
  
                                } else { // restore
                                    chart.setChart(name, categories, data, null, level);
  
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: '#000',
                        //label colors
                        connectorColor: '#000',
                        // connector label colors
                        formatter: function () {
                            return '&lt;b&gt;' + this.point.name + '&lt;/b&gt;: ' + Highcharts.numberFormat(this.y, 0);
  
                        }
                    }
                }
            },
            //formatting over hover tooltip
  
            tooltip: {
                backgroundColor: '#383838',
                formatter: function () {
                    var point = this.point,
                        s = '';
  
                    switch (this.series.options.level) {
                        case 0:
                            s = point.name + ':&lt;b&gt;' + Highcharts.numberFormat(this.y, 0) + ' brands&lt;/b&gt;&lt;br/&gt;';
                            s += 'Click to view drilldown 1';
                            break;
  
                        case 1:
                            s = point.name + ':&lt;b&gt;' + Highcharts.numberFormat(this.y, 0) + ' brands&lt;/b&gt;&lt;br/&gt;';
                            s += 'Click to drilldown 2';
                            break;
  
                        case 2:
                            s = point.name + ':&lt;b&gt;' + Highcharts.numberFormat(this.y, 0) + ' ($m) brand value&lt;/b&gt;&lt;br/&gt;';
                            s += 'Click to drilldown 3';
                            break;
                    }
  
  
                    return s;
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: name,
                data: data,
                level: level,
                /* changes bar size */
                shadow: false,
                color: 'black' //Sectors icon
            }],
            exporting: {
                enabled: false
            }
        },
        /*Remember to rename chart functions for pie chart so it is unique from bar*/
        function (chart) {
            chart.upper = [];
  
            var up = false;
  
            chart.setChart = function (name, categories, data, color, level) {
                //chart.xAxis[0].setCategories(categories);
                if (name === true &amp;&amp; chart.upper.length) {
  
                }
  
                if (up === false) {
                    //chart.toolbar.add('up', 'Level up', 'Level up', function(){ chart.setChart(true); });
                    up = true;
                }
  
                chart.upper.push(chart.series[0].options);
                chart.series[0].remove();
                chart.addSeries({
                    name: name,
                    data: data,
                    level: level,
                    color: color || 'white'
                });
  
  
  
  
            }
  
  
  
        })
  
  
  
    });
  
    function drawDefaultChart() {
        pieChart = new Highcharts.Chart();
    }
  
    $(function () {
  
        $(document).ready(function () {
  
            drawDefaultChart();
  
        });
        $('#resetChart').on("click", function (e) {
            e.preventDefault();
            pieChart = new Highcharts.Chart();
        });
  
  
    })
  </code></pre>
  
  <p>Is there anyway I can have a button reset the entire chart to the initial drilldown no matter which level you're on? </p>