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?
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?
Share Improve this question edited Jan 20, 2018 at 5:56 Rahul Gupta 10.2k7 gold badges64 silver badges69 bronze badges asked Apr 5, 2013 at 9:55 Bartłomiej SkwiraBartłomiej Skwira 1,8481 gold badge19 silver badges24 bronze badges3 Answers
Reset to default 15You'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.'
},
........
.....
....
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'
},