Question

Creating my Highchart with preset options works fine:

chart = new Highcharts.Chart(options);

However, when I want to destroy and recreate the chart it only destroys. Even if I remove chart.destroy(); the chart is still just completely blanked but not recreated.

$('#resetChart').on("click", function(e){
    e.preventDefault();
    chart.destroy();
    chart = new Highcharts.Chart(options);
});

A little stuck here on how to reset this chart.

Edit::

Inspecting the chart container shows the Pie charts is creating something here but doesn’t seem to be retrieving the data properly. Do I need to pass in my data variable again as well even though it’s set in the options?

series: [{
                name: name,
                data: data,
                /* changes bar size */
                pointPadding: 0,
                borderWidth: 0,
                pointWidth: 15,
                shadow: false
        }]

Then data is defined on the page (For our CMS):

<script type="text/javascript">
        data = [
            {
                y: {value},
                name: 'field1',
                id:'1'
            },
            {
                y: {value},
                name: 'field2',
                id:'2'
            },
            {
                y: {value},
                name: 'field3',
                id:'3'
            }
        ];
    </script>

Answer 1

$('#resetChart').on("click", function(e){
    e.preventDefault();
    while(chart.series.length > 0) chart.series[0].remove(true);
    chart = new Highcharts.Chart(options);
});

http://jsfiddle.net/tapkr/1