How to change HighChart xAxis timeline to match local time and not UTC?

Question

Note above in my screenshot, the tooltip is displaying the correct local time. However the xAxis timeline is showing 12:00pm UTC time.

I have global:useUTC set false in 2 places:

In my chartConfig:

 vm.config = {
    global: { useUTC : false }, // <--
    options: {
    // ....

As well as in my setHighCharts function which gets run after the chart is loaded:

const setHighChartOptions = (color, background, gridLine) => {
    Highcharts.setOptions({
        global: { useUTC: false }, // <--
        chart: {
            backgroundColor: background
        },
        legend: {
            itemStyle: { color: color }
        },
        loading: {
            labelStyle: { color: color },
            style: { backgroundColor: background }
        },
        xAxis: { labels: {style: { color: color }}}
    });

    chart.get('y-axis-price').update({
        gridLineColor: gridLine,
        gridLineDashStyle: 'longdash'
    }, false);

    chart.get('x-axis-sentiment').update({
        tickColor: background
    }, false);

    chart.get('x-axis-alert').update({
        tickColor: background
    }, false);
};

Anything I'm missing? :(

Answer 1

Just figured this out!

The global object in my chartConfig was useless.... the key was the setHighChartOptions function. That needed to run in order to set the useUTC to false.

Problem was in my app, that function only gets called if you change themes. So now I just call it right away after the chart is loaded and now the useUTC gets set to false correctly.

const initHighChart = (chart, urlObject) => {
    setHighChartOptions('#fff', '#474747', '#656565');
    let ticker = urlRetrieve.ticker(urlObject);
    let epoch  = urlRetrieve.epochs(urlObject);
    setNewChartTicker(chart, ticker, epoch.start, epoch.end);
};