I have been facing this problem in Highcharts for a while now
The tooltip :
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 ....... >>
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.
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.
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.
Related
I have a graph that looks like the below. By default each tooltip value is in it's own tooltip "bubble", with the datetime at the bottom of the Y axis (hovering on top of the X labels).
The problem is that changing the format of the datetime to match locale is not dynamic with Highcharts. I know I could have users change the dateTimeLabelFormats to match their locale, but I'm looking to leverage moment.js and their locale formatting built in.
I only need to change the datetime in these charts and nothing else.
When I try this code below, it gives me the locale leverage I'm looking for, but the tooltips are merged into 1 box and doesn't have that same feel as default.
tooltip: {
enabled: true,
dateTimeLabelFormats: {
//minute: '%e %b %H:%M',
hour: '%e %b %H:%M'
},
// For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
formatter: function() {
var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';
$.each(this.points, function(i, point) {
toolTipTxt += '<br/><span style="color:'+ point.series.color +'"> ' + point.series.name + ': ' + point.y+'</span>';
});
return toolTipTxt;
},
crosshairs: true,
shared: true
},
Is there a way to emulate default tooltip with the formatter? Individual "bubbles" for the values and the timestamp hovering at the bottom?
Is it possible to use xDateFormat with moment.js somehow?
I found a solution that works, right from the Highcharts API documentation for tooltip split.
The jsfiddle example from the API documentation had everything I needed (except moment.js).
I must have overlooked this 100 times today. Here's the final code that worked for me, and a screenshot of the result.
Now the tooltip's header will be in the right locale without the user changing any code.
tooltip: {
enabled: true,
// For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
formatter: function () {
// The first returned item is the header, subsequent items are the points
return [moment.unix( this.x / 1000).format("LLL")].concat(
this.points.map(function (point) {
return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
})
);
},
split: true,
},
The chart displays the wrong date at the data point, I would like the chart to display the correct date with the data label at the bottom. (see attached)
I would like the date displayed in the hover over to be the same as the date displayed at the datapoint on the xAxis
Here is the code that I have for this chart
xAxis: {
type: 'datetime',
min:new Date(new Date().getFullYear(),0,1).getTime(), // new Date().getTime()-365*24*3600*1000*.75,
max : new Date().getTime(),
labels:{
step:1
}
},
You need to use below option:
Highcharts.setOptions({
global: {
useUTC: false
}
});
I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.
Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same.
For example, in this chart, the number should be 2,581,326.31 but otherwise exactly the same.
How can I do this?
I tried adding:
tooltip: {
pointFormat: "{point.y:,.0f}"
}
But this got rid of the nice circle and series label in the tooltip - I'd like to keep that. And ideally I'd prefer to use a single option to set global number formatting, across the whole chart.
This can be set with the thousandSep (API) global option.
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
See this JSFiddle example.
This way worked with me.
I configured in yAxis option.
yAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2);
}
}
}
In case you want to show numbers without commas and spaces.
eg. by default 9800 shows as 9 800.
If you want 9800 to be shown as 9800
you can try this in tooltip:
tooltip: {
pointFormat: '<span>{point.y:.f}</span>'
}
This way work for me.
I use Angular 10 and I did this for Tooltip and yAxis.
for yAxis use numberFormat:
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
formatter: function() {
return Highcharts.numberFormat(this.value, 3);
}
},
and for Tooltip :
{point.y:.f}
I am working with flot jquery library to draw a chart
this is my code
chartOptions = {
xaxis: {
timeformat: "%H",
twelveHourClock: true,
as you see, i set the twelveHourClock option to true and yet I still get results like 14 18 20 ...
why please?
Update 1
I already tried to use %I %p in timeformat but then I got the following results, please check that the bellow values should be 8am 10am 12 ..... 8 pm
For zero padded 12 hour format,
xaxis: {
mode: "time",
timeformat: "%I %p",
tickSize: [1, "hour"],
twelveHourClock: true,
}
this is my yAxsis and normally displays time for column range chart
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%P', this.value);
}
}
It normally works perfect when distance is some amount .
Question : When time distance between starttime and endtime is low then yAxsis dispalys 00:00 pm through the axsis I also tried %M:%P still dispalys 00:pm
here is the js fiddle
Thanks Sebastian .
minPointLength
did work..