CODEWITHSUNDEEP
javascripthighchartstooltiputc
Pravin
Pravin

Reputation: 471

Remove UTC date from Highcharts tooltip

I have been facing this problem in Highcharts for a while now

The tooltip :

enter image description here

At the top, the date hour is in UTC format, I want it to be in the same format the data is (or local time zone and it shouldn't change to UTC etc, remove the "T & Z" from the date also!)

My snippets of code that concern tooltip are as follows :

dateTimeLabelFormats : {
                second : '%H:%M',
                minute : '%H:%M',
                hour : '%H:%M',
                day : '%e. %b %a',
                week : '%e',
                month : '%b',
                year : '%e'
                 },
            labels : {
                formatter: function(){ 
                  var daystr = Highcharts.dateFormat('%e %b %a', this.value);
                  var first = daystr.substring (0,daystr.length - 1);
                  return first;                                                                                                                 //return Highcharts.dateFormat('%e %b,', this.value);
                }

And :

tooltip: {
            shared: true,
            valueDecimals: 2,
         },

Also, the day coming on the x-axis is 2 days +/- , I tried removing the UTC format by setting useUTC to false, even that did not work.

I need to know how to get datehour in non-UTC format for the tooltip.

All approaches/suggestions are most welcome.

UPDATE :

Ok, somehow I am not able to remove the UTC from any of my tabs. But it has somehow already removed from one tab. I have no idea how!

I used this at the end of my highcharts which is not working :

   ,setOptions : ({
            global : {
                            useUTC : false
            }
            })

However, where exactly do I use the following as mentioned on the site ( This is not working )

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

I really don't understand what is happening here. The first one should work technically. Can you tell me exactly where to add these snippets, my huge code of highcharts starts as :

$j(function () {


            $j('#container1').highcharts({
            chart: {
                zoomType:'xy'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Trend Graph'
            },     << And so on ....... >>

Upvotes: 4

Views: 3707

Answers (3)

Kevin Gill
Kevin Gill

Reputation: 1

It's worth noting that useUTC should be set before creating your charts, otherwise it won't pick up the settings if you apply after.

Upvotes: 0

pitou
pitou

Reputation: 21

In your tooltip you should add xDateFormat for date format

tooltip: {
        xDateFormat: '%Y-%m-%d',
        shared: true,
        valueDecimals: 2
    }

If you want to have date with time you need to add like this

tooltip: {
        xDateFormat: '%Y-%m-%d %H:%M:%S',
        shared: true,
        valueDecimals: 2
    }

then remove dateTimeLabelFormats.

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

You need to indeed set useUTC to false and then use timezoneOffset to be the same as timezone used in data.

useUTC didn't work? How did you set this? Make sure the same way as in demos.

Upvotes: 2

Related Questions