Angularjs highcharts and modal windows clear previous chart

Question

Hi I am displaying a chart in modal window with angularjs and highcharts. It is working fine the only problem is it won't clear a old chart on modal closing, here is my code

reportModule.directive('hcChart', function () {
   return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,

        link: function (scope, element, attrs) {

            scope.$watch(function () { return attrs.chart; }, function () {

                if (!attrs.chart) return;

                var charts = JSON.parse(attrs.chart);

                $(element[0]).highcharts(charts);

            });
        }
    };
}); 

and my data

$scope.chartOptions = {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Title'
            },
            xAxis: {
                categories:  ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
            },

            yAxis: {
                min: 0,
                title: {
                    text: yText,
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 2016',
                data: [107, 31, 635, 203, 2]
            }],
             plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                shadow: true
            },
            loading: true
    };

and html

<hc-chart chart='{{ chartOptions }}'>Placeholder for generic chart</hc-chart>

Here what I tried

$('#report').on('hidden.bs.modal', function (e) {
      $timeout(function(){
        $scope.chartOptions=null;
      });
    })

but it is not working. I just want to clear old chart values on modal close please help

Answer 1

Please try to set the chartOptions as an empty instead of null. Since you set it to null, there will be an error on JS to not execute anymore.

$('#report').on('hidden.bs.modal', function (e) {
  $timeout(function(){
    $scope.chartOptions={};
  });
})

---

Update: Removes the chart and purges memory. This method should be called before writing a new chart into the same container. It is called internally on window unload to prevent leaks.

1. Add the id for chart element

<hc-chart id="highChart" chart='{{ chartOptions }}'>Placeholder for generic chart</hc-chart>

2. Update your code

$('#report').on('hidden.bs.modal', function (e) { $timeout(function(){ $('#highChart').highcharts().destroy(); }); })

Answer 2

Try removing the series :

$scope.chartOptions.series[0].remove(true);