In the below HighCharts
example, the series A
and B
have identical data. Only the line for B
is visible in the chart plot area, as it is plotted directly over A
.
It is impossible for the end user to know that the A
is behind B
.
We can set tooltip.shared = true
in the configuration object to show all the data values for a given x-axis point when hovered over any series. However, in my real-life example I have up to 50 series plotted on the chart and this is not appropriate.
Is it possible to keep the behaviour of tooltip.shared = false
, but when the user hovers over a series that overlaps at that point with one or more series, to show all (and only) of the overlapping series values in the tooltip? Or is there any other user-friendly way to indicate that there are 2+ identical y-values at a given x-value?
http://jsfiddle.net/adamtsiopani/XbYZz/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
valueSuffix: '°C'
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
http://jsfiddle.net/adamtsiopani/XbYZz/
Highcharts doesn't have a solution for this yet. They have a feature to hide one series so other is visible, this is a good alternative. But if you need to get a shared tool-tip when the 2 series overlap it can be done as shown in the below fiddle.
$(function () {
var series1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
var series2 = [24.9, 50.5, 106.4, 90.2, 80.0, 150.0, 160.6, 170.5, 160.4, 180.1, 95.6, 54.4];
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
formatter: function () {
var s1 = this.series.chart.series[0].processedYData[this.point.index];
var s2 = this.series.chart.series[1].processedYData[this.point.index];
if (s1 == s2) {
return '<b>' + this.series.chart.series[0].name + ' :' + s1 + '</b><br/><b>' + this.series.chart.series[1].name + ' :' + s2 + '</b><br/>in month : ' + this.x;
}
return '<b>' + this.series.name + ' :' + this.y + '</b><br/>in month : ' + this.x;
}
},
series: [{
data: series1
}, {
data: series2
}]
});
});
http://jsfiddle.net/Malinga/2jbdqe6x/7/
reference:http://www.malinga.me/highcharts-shared-tooltips-only-in-overlapping-points/#more-109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With