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,
},
Related
I am trying to use html tags like <table> and <tr> for the dataLabels, but it seems I'm not able to use these tags and only the basic tags (<b>, <strong>, <i>, <em>, <br/>, <span>). I was able to format the tooltip data with other html tags by setting the 'useHTML' tag to true. Is there a way to do the same for the dataLabels? This is what the two look like, the tooltip is on bottom.
You can format dataLabels with useHTML also. I don't know how readable your chart will be with all that extra data showing at all times, but you can put a table in the dataLabels.
http://jsfiddle.net/crLcxvLr/1
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return "<table><tr><td>HEADER LEFT</td><td class='right'>Header Right</td></tr><tr><td>" + this.x + "</td><td class='right'>" + this.y + "</td></tr>";
},
enabled: true,
useHTML: true,
}
}
},
from the highcharts api it says we can edit the fontsize in the tooltip, however, this only edits the values and not the x axis label.
Is there a way to increase the size of the Tuesday, May 17... etc as well? i.e. the x axis label?
Editing the real xaxis label did not work.
Thanks! :)
For custom tooltips formatting, you can use the formatter property to pass a function which returns your custom html.
tooltip: {
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
}
},
useHTML: true
Fiddle here
More info here
I have a chart which shows points, when I hover over these points the co-ordinates of the point is shown.
I want to add a third line to this tooltip showing the date associated with the point. I have added this date to the raw data fed to the graph but I'm not sure how to make it show in this box? Basically I want to add a different value into MY DATE VALUE below for every point. How can this be done?
tooltip: {
borderRadius: 10,
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>' + MY DATE VALUE;
}
},
Thanks!
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.
Hovering over a series in Highchart graph displays a popup with series name and Y value, in the example: 'Tokyo 9.5ºC'. I would like to display my own, custom text on hover - I can do that by modifying each point's name. At the same time I would like to hide the default series name and Y value. I've searched the doc but haven't found anything suitable. Any ideas how to approach this?
You'll have to specify a tooltip formatter yourself (see documentation):
tooltip: {
formatter: function() {
return 'The value for <b>'+ this.x +
'</b> is <b>'+ this.y +'</b>';
}
},
there you can just show the x-values if you like or your custom text.
Hope that helps.
I have modified the DEMO and created a new DEMO here
To customize the text displayed in the tooltip, you should use it like:
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
........
.....
....
tooltip: {
formatter: function() {
return '<strong>X value: </strong>'+ this.x;
}
},
});
if you want to format the second line of the tool tip, but leave the x-axis label name alone you can use point format instead of formatter.
tooltip: {
pointFormat: 'The value is point.y'
},