Here's my fiddle vs the one I want my chart to operate like:
Highcharts.chart('container', {
"accessibility": {
"enabled": false
},
"credits": {
"enabled": false
},
"title": {
"text": "fruits",
"margin": 50,
},
"tooltip": {
"split": true,
"outside": true
},
"boost": {
"useGPUTranslations": false,
"seriesThreshold": 1,
"enabled": true
},
"chart": {
"spacingRight": 15,
"spacingLeft": 5,
"marginTop": 60,
"width": 200,
"zooming": {
"mouseWheel": {
"enabled": true
},
"type": "y"
},
"marginBottom": 100,
"events": {}
},
"legend": {
"width": 200,
"maxHeight": 100,
"x": 15,
},
"xAxis": {
"minorTicks": true,
"crosshair": {
"snap": false
},
"maxPadding": 0,
"minPadding": 0,
"title": {
"offset": 7,
"style": {
"fontSize": "11px"
}
},
"labels": {
"y": -7,
},
"tickLength": 0,
"endOnTick": true,
"lineWidth": 0,
"startOnTick": true,
"tickAmount": 2,
"minorTickInterval": "auto",
"tickPositions": [
0,
150
],
"min": 0,
"max": 150,
"reversed": false,
"opposite": true,
"gridLineWidth": 0,
"minRange": 0.1,
"type": "linear"
},
"yAxis": {
"min": 1067.62296,
"max": 1097.18856,
"minorTicks": true,
"reversed": true,
"crosshair": {
"snap": false
},
"title": {
"text": null
},
"maxPadding": 0,
"minPadding": 0,
"events": {},
"labels": {
"padding": 0,
"rotation": -90,
"format": "{value}",
},
"plotLines": []
},
"annotations": [],
"exporting": {
"enabled": false
},
"plotOptions": {
"series": {
"cursor": "pointer",
"connectNulls": false,
"findNearestPointBy": "xy",
"pointStart": null,
"allowPointSelect": true,
"stickyTracking": false,
"turboThreshold": 0,
"events": {},
"point": {
"events": {}
}
}
},
"series": [
{
"id": "apples",
"cropThreshold": 999999999,
"data": [
[
139.1992,
1067.62296
],
[
103.4107,
1081.85712
],
[
93.0917,
1097.18856
]
],
"name": "apples",
"lineWidth": 0.5,
"visible": true,
"allowPointSelect": true
},
{
"id": "oranges",
"cropThreshold": 999999999,
"data": [
[
103.4093,
1067.62296
],
[
134.8164,
1082.71056
],
[
48.788,
1097.18856
]
],
"name": "oranges",
"lineWidth": 0.5,
"visible": true,
"allowPointSelect": true
},
{
"id": "grapes",
"cropThreshold": 999999999,
"data": [
[
105.3344,
1067.62296
],
[
103.497,
1079.96736
],
[
98.965,
1097.18856
]
],
"name": "grapes",
"lineWidth": 0.5,
"visible": true,
"allowPointSelect": true
}
]
});
Split tooltip works only for points with the same x values.
I assume that you want to show tooltips for all points with the same index. To do that, you can add the simple plugin below:
(function(H) {
H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed) {
const result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
const hoverPoint = result.hoverPoint;
if (hoverPoint) {
const allSeries = hoverPoint.series.chart.series;
allSeries.forEach(s => {
const point = s.points[hoverPoint.index];
if (point && point !== hoverPoint) {
result.hoverPoints.push(point);
}
});
}
return result;
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/9vw26mLy/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts