We Keep Coding

highstock Get all data from current hovered time

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

Custom color & tooltip for a single bar in Highcharts histogram

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

Remove day name from highstock chart tooltip

How can i remove day name from the tooltip (highlighted in red) in high-stock chart.

You can change the standard dateTimeFormat for the day* label this chart uses.
* It might be you need to change something else as day, depending on your chart content. See the dateTimeLabel API for all possibilities you can change.
tooltip: {
dateTimeLabelFormats: {
day: '%b %e, %Y'
}
},
This changes the format to Mar 01, 2000, for example.
If you want a different time format you can check out the PHP strftime which Highcharts uses for their formatting as stated in their dateFormat API
Here you can find a working JSFiddle

I guess you can achieve this by editing your tooltip format during the declaration.
example of tooltip configuration
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e %b %Y',
new Date(this.x))
+ ' date, ' + this.y;
}
},
You can also customize your X axis tooltip by using this doc :
https://api.highcharts.com/highcharts/plotOptions.series.tooltip

Series for tooltip only in highcharts

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/

highcharts: tooltip shows for spline but not scatter plot

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.