I am using this code for Highcharts tooltip generation:
tooltip: {
shared: true,
crosshairs: true,
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': ' + point.y + ' m/s';
});
return s;
}
}
It works perfectly for charts which use spline for the defaultSeriesType but it doesn't work for scatter charts.
See this Fiddle http://jsfiddle.net/s83aT/ for both spline and scatter in action.
Any advice will be much appreciated. Thanks in advance.
After Sebastian Bochan pointed out that "shared: true" is part of the issue I looked into this some more and here is what I found out and how I ultimately solved the problem. For whatever reason the Fiddle linked in the question was screwed up.
shared: true
is required if there is more than one series in the chart and one wants to have all series displayed in the same tooltip. In my case this was a leftover from other plots I made but not needed in the single series plots my original question was about.
For single series plots "shared: true" should not be used. It defaults to "shared: false" and thus "shared" doesn't need to be included at all.
Here's the formatter code which I am now using and it works for all single series, whether it's spline or scatter:
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +
'</b> ' + this.series.name + ': ' + this.y + ' deg';
}
},
See http://jsfiddle.net/Reality_Extractor/pNFYL/ for both spline and scatter plots in action.
Related
I feel i've been searching the whole internet now to try and find the easiest way to get all the data from multiple lines, when hovering over a specific time in an highstock chart.
Can someone help me with that? :)
You can get information about hovered points by using mouseOver event or tooltip.formatter
Example for getting multiple points information when tooltip is shared:
tooltip: {
formatter: function() {
let tooltip = this.points.reduce(function(s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.y + 'm';
}, '<b>' + new Date(this.x) + '</b>');
inf.innerHTML = tooltip;
return tooltip;
},
shared: true
},
Demo:
https://jsfiddle.net/BlackLabel/veqj67yf/
https://jsfiddle.net/BlackLabel/quympake/
API Reference:
https://api.highcharts.com/highcharts/series.line.point.events.mouseOver
https://api.highcharts.com/highcharts/tooltip.formatter
I am trying to plot time-series data using Highcharts histogram & would like to have some way to highlight the bar that contains the latest datapoint (it will be the last element in the array) and also have a custom tooltip for the same.
So let's say I am plotting average daily temperatures for a city over a 1 year period -- how would I highlight the bar that contains the latest temperature & also provide a tooltip that indicates the same.
Lets say, in THIS Highcharts example the last 3 in the data array is the latest temperature & I would like to highlight, as well as provide a custom tooltip for the bar with that value.
Something similar has been discussed HERE but it doesn't talk about highlighting the relevant bar.
You can update the last point in load event and add a flag to distinguish it in the tooltip's formatter function:
chart: {
events: {
load: function() {
var histogramSeries = this.series[0],
lastPoint = histogramSeries.points[histogramSeries.points.length - 1];
lastPoint.update({
color: 'red'
});
lastPoint.isLast = true;
}
}
},
tooltip: {
formatter: function() {
if (this.point.isLast) {
return '<b>Last point result: </b> ' + this.y;
}
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/cefy419v/
API Reference:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts.Point#update
I need to use several series in tooltip in a highchart chart. These series should be completely invisible except tooltip. I 've tried setting visible to false. However in this case, legends for that series are still visible though faded. If I state "ignoreHiddenSeries: true", hidden series are not there at all and I cannot use them at tooltip. Is there a way for this type of usage? Currently I am keeping those series in global javascript arrays outside the highchart's scope and using them in tooltip formatter. I prefer to keep those data in highchart as well.
By the way setting showInLegend: false, visible: false also makes the series unusable in tooltip.
Each invisible serie should have two params:
visible: false,
showInLegend: false,
You need to use the tooltip formatter and use loop over each serie / each point to print values.
tooltip: {
formatter: function() {
var series = this.series.chart.series,
x = this.x,
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + this.key + '</span><br/>';
each(series, function(serie, i) {
each(serie.data, function(data, j){
if(data.x === x) {
txt += '<span style="color:' + data.color + '">\u25CF</span> ' + data.series.name + ': <b>' + data.y + '</b><br/>';
}
});
});
return txt;
}
},
Example: http://jsfiddle.net/697e8seo/
I have an inverted columnrange chart in highcharts. I am able to create a unique label for the low and high point for each range.
But as the chart gets longer I would like to label each on the columns by their series name.
I need a third label? Possibly something above each range that would display the name of the series. So far, I'm using the formatter to give each point a unique label.
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === this.point.low) {
return 'low: ' + this.y;
}
if (this.y === this.point.high) {
return 'high: ' + this.y;
}
return 'blah';
}
}
}
},
My fiddle: http://jsfiddle.net/zeus6ky9/6/
I ended up adding an additional invisible series for each series already there. And creating a label for it.
Why all item from 1st row have same tooltip, based on 2nd point http://jsfiddle.net/Ye3Ak/243/ ?
tooltip:{
formatter: function() {
return '<b>'+ this.x +' - ' +this.series.name +' - ' +this.point.name +'</b><br/>'+
Highcharts.dateFormat('%e %B %H:%M',this.point.low)+
' - ' +Highcharts.dateFormat('%B %e %H:%M',this.point.high)+'<br/>';
}
},
It looks like bug, because in 4.0.4 it worked properly. I reported it to our developers here: https://github.com/highslide-software/highcharts.com/issues/3899