ebwaked
Posts: 12
Joined: Tue Mar 23, 2021 1:33 pm

How to export a chart's current theme

I am trying to take a chart, with its current settings (colors, background colors, etc...) and export it as an object to save and apply to future charts as a theme. I know there is Highcharts.setOptions which i use to apply some custom themes already. Basically I am looking for an API or library method I can use for this.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to export a chart's current theme

Hi ebwaked,

Thanks for contacting us with your question.

All those settings are available in chart.userOptions object. You can use it to create future charts with same settings.
Demo: https://jsfiddle.net/BlackLabel/d672kofw/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
ebwaked
Posts: 12
Joined: Tue Mar 23, 2021 1:33 pm

Re: How to export a chart's current theme

More of what I am looking for is that current chart loaded up, and there is a button that says 'Save Theme' or something like that. When a user clicks that button it will save the background color, chart colors, font styles etc...similar to this theme object I have below:

Code: Select all

$.CustomHighcharts.pgptheme = {
    global: {
        useUTC: true
    },
    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    chart: {
        backgroundColor: {
            pattern: {
                image: "/Content/images/chart/bg.svg",
                width: 6,
                height: 6
            }
        },
        style: {
            fontFamily: '"Roboto", helvetica, arial, sans-serif'
        },
        plotBorderColor: '#606063'
    },
    title: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase',
            fontSize: '20px'
        }
    },
    subtitle: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase'
        }
    },
    xAxis: {
        gridLineColor: '#34FFFF',
        labels: {
            style: {
                color: '#A847C0'
            }
        },
        lineColor: '#34FFFF',
        minorGridLineColor: '#34FFFF',
        tickColor: '#707073',
        title: {
            style: {
                color: '#A0A0A3',
                font: 'bold 14px "Roboto", helvetica, arial, sans-serif'
            }
        }
    },
    yAxis: {
        gridLineColor: '#34FFFF',
        labels: {
            style: {
                color: '#34FFFF',
            }
        },
        opposite: true,
        lineColor: '#34FFFF',
        minorGridLineColor: '#34FFFF',
        tickColor: '#34FFFF',
        tickWidth: 1,
        title: {
            style: {
                color: '#A0A0A3',
                font: 'bold 14px "Roboto", helvetica, arial, sans-serif'
            }
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        style: {
            color: '#F0F0F0'
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                color: '#B0B0B3'
            },
            marker: {
                lineColor: '#333'
            }
        },
        boxplot: {
            fillColor: '#505053'
        },
        candlestick: {
            lineColor: 'white'
        },
        errorbar: {
            color: 'white'
        }
    },
    legend: {
        itemStyle: {
            color: '#E0E0E3'
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
            color: '#606063'
        }
    },
    credits: {
        style: {
            color: '#666'
        }
    },
    labels: {
        style: {
            color: '#B631B8',
            font: 'bold 14px "Roboto", helvetica, arial, sans-serif'
        }
    },

    drilldown: {
        activeAxisLabelStyle: {
            color: '#F0F0F3'
        },
        activeDataLabelStyle: {
            color: '#F0F0F3'
        }
    },

    navigation: {
        buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
                fill: '#505053'
            }
        }
    },

    // scroll charts
    rangeSelector: {
        buttonTheme: {
            fill: '#505053',
            stroke: '#000000',
            style: {
                color: '#CCC'
            },
            states: {
                hover: {
                    fill: '#707073',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: '#000003',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                }
            }
        },
        inputBoxBorderColor: '#505053',
        inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
        },
        labelStyle: {
            color: 'silver'
        }
    },

    navigator: {
        handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
        },
        outlineColor: '#CCC',
        maskFill: 'rgba(255,255,255,0.1)',
        series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
        },
        xAxis: {
            gridLineColor: '#505053'
        }
    },

    scrollbar: {
        barBackgroundColor: '#808083',
        barBorderColor: '#808083',
        buttonArrowColor: '#CCC',
        buttonBackgroundColor: '#606063',
        buttonBorderColor: '#606063',
        rifleColor: '#FFF',
        trackBackgroundColor: '#404043',
        trackBorderColor: '#404043'
    },

    // special colors for some of the
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#C0C0C0',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'
};
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to export a chart's current theme

ebwaked,

Highcharts doesn't have such feature. To create something like that you would have to get a chart.userOptions object like in my previous example and save chosen properties.

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
ebwaked
Posts: 12
Joined: Tue Mar 23, 2021 1:33 pm

Re: How to export a chart's current theme

Below I have the userOptions object printed in the console right before the chart is created. I cant see any colors anywhere in this object. Is there a reason why?

https://imgur.com/jlvlrRD
Image
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to export a chart's current theme

Hi ebwaked,

If colour options are not there, then it seems that there is something wrong. Could you please create a live demo with the issue? You can start here: https://jsfiddle.net/BlackLabel/2gnckvb4/

Regards!
Mateusz Bernacik
Highcharts Developer
ebwaked
Posts: 12
Joined: Tue Mar 23, 2021 1:33 pm

Re: How to export a chart's current theme

Ahhh that is what I was looking for. I was using chart.userOptions

Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to export a chart's current theme

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”