How to change chart theme dynamically?

[donli1210]

Is there a way to change chart theme dynamically by clicking a button? Please see this JsFiddle

I defined a theme object Highcharts.theme. If I put Highcharts.setOptions(Highcharts.theme); out of the function, it is working.

If I put changing the theme in the click event, it is not working.

<button ng-click="changeTheme()">Change Theme</button>

    // Change theme, not working in the function.
    $scope.changeTheme = function() {
      console.log('Clicked.');
      Highcharts.setOptions(Highcharts.theme);
    };

Please advice. Thanks!

[pablojim]

This is how to raise an issue! @donli1210 Good work!

You can force the chart to reinitialise by creating a brand new copy of the config. See:

http://jsfiddle.net/ugkts956/

Hope this helps.

[donli1210]

Thank for your reply, it is working now in jsfiddle.

Actually, I'm using this in https://github.com/akveo/blur-admin theme. I just tried, it is not working. It is difficult for me to reproduce it in jsfiddle. I feel maybe $scope.chartConfig = angular.copy($scope.chartConfig); not working in the admin theme? Do you have any suggestions for this?

[pablojim]

Hard for me to help without seeing an example. One avenue to try is $scope.chartConfig = {}; as a test to see if you get a blank chart with the right theme.

[donli1210]

Thanks!

I changed the code to

$scope.changeTheme = function() {
            console.log("change theme.");
            Highcharts.setOptions(Highcharts.theme);
            console.log($scope.chartConfig);
            $scope.chartConfig = {};
            $scope.chartConfig = angular.copy($scope.chartConfig);
            console.log($scope.chartConfig);
        }

The theme does not change after clicking the button, the chart became empty. Also I can see $scope.chartConfig is {} after clicking the button. It seems $scope.chartConfig = angular.copy($scope.chartConfig); does not work.

[donli1210]

Or it is possible Highcharts.setOptions(Highcharts.theme); does not work. I don't know how to debug this. Any suggestions?

[donli1210]

Problem is solved by removing the Angular template.

Thanks!