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/
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 am currently making a web application where users can add their own chart panels, and can then drag certain database tables into said panel to make it show in the chart. My problem is that I can't push datasets into the dynamically created charts, because the variable which holds the chart are not written directly in the document, so the function I made to push those datasets can't push to the variables like it would normally.
Here's the function to make new panels and charts:
function addnewchart(x) {
eval("ctx" + x + "= document.getElementById('linechart" + x + "').getContext('2d');");
eval("var lineChart" + x + " = new Chart(ctx" + x + ", {type: 'line',data: {labels: '',datasets: ''},options: {legend: {display: false},scales: {xAxes: [{gridLines: {display: false},scaleLabel: {display: true,labelString: ''}}],yAxes: [{ticks: {beginAtZero: true},scaleLabel: {display: true,labelString: ''}}]}}});");
};
And this is the function to push datasets to those charts:
function addData(chart, Datalabel, Tabledata) {
datasintable.push(Tabledata + "S");
var curColor = randomColor();
var newDataset =
{
label: Datalabel,
fill: false,
backgroundColor: curColor,
borderColor: curColor,
data: Tabledata
}
console.log(chart,Datalabel,Tabledata, newDataset);
chart.data.labels.push(['test1', 'test2', 'test3', 'test4', 'test5']);
chart.data.datasets.push(newDataset);
chart.update();
}
How should I approach this problem?
Apparently, the way to fix this was instead of using the variable chart in addData(), use window[chartname + index] when manipulating dynamically created charts. I found this out by trying to point to the chart by using both eval() and window[]. Eval didn't work at all, but Window did the trick.
Example:
var number = 1;
window['linechart' + number];
This will call chart linechart1.
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.
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.