CODEWITHSUNDEEP
javascripthighchartstimezonemomentjs
Shishir Mudliyar
Shishir Mudliyar

Reputation: 175

Unable to set timezone in Highcharts graph

I want to set timezone 'America/Los_Angeles' in the Highchart graph and i dont want to show default client browser timezone. For that i have added library moment.js into code. But when i am running this, i am getting below error.

Uncaught TypeError: n.tz is not a function
    at a.Time.getTimezoneOffset (highstock.js:97)
    at a.Time.timezoneOffset.set (highstock.js:95)
    at a.Time.getTimeTicks (highstock.js:99)
    at F.C.getTimeTicks (highstock.js:166)
    at F.<anonymous> (highstock.js:393)
    at F.a.(anonymous function) [as getTimeTicks] (https://url/highstock-6.0.5/highstock.js:19:376)
    at F.setTickPositions (highstock.js:139)
    at F.<anonymous> (highstock.js:404)
    at F.a.(anonymous function) [as setTickPositions] (https://url/highstock-6.0.5/highstock.js:19:376)
    at F.setTickInterval (highstock.js:138)

Following are the Highchart graph code which i am using 

window.moment = moment;    

Highcharts.chart('chart1', {
                chart: {
                    type: 'area',
                    zoomType: 'x'
                },
          time: {
                    timezone: 'America/Los_Angeles'
                },
                title: {
                    text: 'graph'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Attack Size'
                    }
                },
                tooltip: {
                    formatter: function () {
                         return  Highcharts.dateFormat('%b %e, %H:%M',new Date(this.x))+ '<br/> Attack <b>' + this.y + ' ]';
                   } 
                },
                credits: {
                    enabled: false
                  },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                    pointStart: 1940,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                                }
                            }
                        }
                    },
                    series:{
                        turboThreshold:4000
                    }
                },
                series: [{
                    name: 'Description',
                    data: data
                }]
            });

Upvotes: 1

Views: 1712

Answers (1)

Matt Johnson-Pint
Matt Johnson-Pint

Reputation: 241525

The error .tz is not a function means that the the tz function is not available on the moment object, probably because Moment-Timezone has not been installed.

You will need to import both moment.js and moment-timezone-with-data (or moment-timezone-with-data-2012-2020, etc.) as described in the moment-timezone docs.

Upvotes: 2

Related Questions