I have a problem with changing the theme for highcharts. I have created an array to hold all the themes and am trying to change them via a select list onChange event.

var highcharts_theme = [];

/* Default theme */
highcharts_theme.push({});

/* Dark Blue theme */
highcharts_theme.push({
    colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 250, 500],
            stops: [
                [0, 'rgb(48, 48, 96)'],
                [1, 'rgb(0, 0, 0)']
            ]
        },
.... Shortened for brevity.....

My code to change the theme is :

    $('#theme-type').selectmenu({ width: 200 }).change(function (e) {
        var themeIndex = parseInt($('#theme-type').val());
        Highcharts.theme = highcharts_theme[themeIndex];
        // Apply the theme
        highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    });

The problem I am having is that if for example I switch to the Skies theme it is fine, but then changing to any other theme, the skies background remains along with other elements of the theme.

Does anyone know of a proper way to reset the theme entirely?

Thanks

I have a problem with changing the theme for highcharts. I have created an array to hold all the themes and am trying to change them via a select list onChange event.

var highcharts_theme = [];

/* Default theme */
highcharts_theme.push({});

/* Dark Blue theme */
highcharts_theme.push({
    colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 250, 500],
            stops: [
                [0, 'rgb(48, 48, 96)'],
                [1, 'rgb(0, 0, 0)']
            ]
        },
.... Shortened for brevity.....

My code to change the theme is :

    $('#theme-type').selectmenu({ width: 200 }).change(function (e) {
        var themeIndex = parseInt($('#theme-type').val());
        Highcharts.theme = highcharts_theme[themeIndex];
        // Apply the theme
        highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    });

The problem I am having is that if for example I switch to the Skies theme it is fine, but then changing to any other theme, the skies background remains along with other elements of the theme.

Does anyone know of a proper way to reset the theme entirely?

Thanks

• javascript
• jquery
• themes
• highcharts

2 Answers 2

Every time you set a theme, it merges with the existing theme, and hence any option that is not present in the new theme it will pick from the existing theme. This may not be desired always.

Unfortunately, Highcharts does not give an option to go back to the very defaults that are set at the time of first load. The following code can be used to get that functionality

// Make a copy of the defaults, call this line before any other setOptions call
var HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {});

function ResetOptions() {
    // Fortunately, Highcharts returns the reference to defaultOptions itself
    // We can manipulate this and delete all the properties
    var defaultOptions = Highcharts.getOptions();
    for (var prop in defaultOptions) {
        if (typeof defaultOptions[prop] !== 'function') delete defaultOptions[prop];
    }
    // Fall back to the defaults that we captured initially, this resets the theme
    Highcharts.setOptions(HCDefaults);
}

After resetting the theme, applying a new theme would work as if that's the first theme being applied.

Demo @ jsFiddle

If you remove all of the color options and reload the Highcharts object it will default back to the default basic theme. If you set the below to null it should not show a back ground image once reloaded.

plotBackgroundImage: null