How to show all tooltip Text where line series circle bullets intersect Amcharts 4? - amcharts4

Question

I am using a Amcharts4 Line series with valueX and valueY instead of categoryX.
Currently I am able to see the tooltip on a hover of bullet/bubble but I also want to see the tooltip of all bullets if they are intersecting and overlapping with each other.
It shows the tooltip if i hover on a single bullet/bubble but if you see the red and green line intersecting each other, it shows the tooltip of green bullet/bubble only, not the other which is hidden at its back.
Click here to see Line Series graph with ValueX and ValueY
This is my code where I am having 3 series and setup a tooltip for each bullet :
let series1 = chart.series.push(new am4charts.LineSeries());
series1.cursorTooltipEnabled = true;
series1.showTooltipOn = 'hover';
series1.dataFields.valueY = "compressorCap";
// series1.dataFields.categoryX = "evapDegC"; // If X-Axis is Category Axis
series1.dataFields.valueX = "evapDegC"; // If X-Axis is Value Axis
series1.name = "Compressor capacity";
let series1toolTip = series1.bullets.push(new am4charts.CircleBullet());
series1toolTip.tooltipText = "{name} in {valueX}°C => {valueY}";
series1.tooltip.getFillFromObject = false;
series1.tooltip.background.fill = am4core.color("#b9a9e6");
series1.legendSettings.valueText = "{valueY}";
series1.visible = false;
series1.stroke = am4core.color("#b9a9e6");
let series2 = chart.series.push(new am4charts.LineSeries());
series2.cursorTooltipEnabled = true;
series2.showTooltipOn = 'hover';
series2.dataFields.valueY = "evapCoilCap";
// series2.dataFields.categoryX = "evapDegC"; // If X-Axis is Category Axis
series2.dataFields.valueX = "evapDegC"; // If X-Axis is Value Axis
series2.name = 'Evaporator coil capacity';
let series2toolTip = series2.bullets.push(new am4charts.CircleBullet());
series2toolTip.tooltipText = "{name} in {valueX}°C => {valueY}";
series2.tooltip.getFillFromObject = false;
series2.tooltip.background.fill = am4core.color("red");
series2.legendSettings.valueText = "{valueY}";
series2.stroke = am4core.color("red");
let series3 = chart.series.push(new am4charts.LineSeries());
series3.cursorTooltipEnabled = true;
series3.showTooltipOn = 'hover';
series3.dataFields.valueY = "evapCoilSensibleCap";
// series3.dataFields.categoryX = "evapDegC"; // If X-Axis is Category Axis
series3.dataFields.valueX = "evapDegC"; // If X-Axis is Value Axis
series3.name = 'Evaporator sensible cooling capacity ';
let series3toolTip = series3.bullets.push(new am4charts.CircleBullet());
series3toolTip.tooltipText = "{name} in {valueX}°C => {valueY}";
series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#13bb37");
series3.legendSettings.valueText = "{valueY}";
series3.stroke = am4core.color("#13bb37");
// Add chart cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomY";

Answer 1

In order to display multiple tooltips, you need to set tooltipText directly on series, not on a bullet.
series.tooltipText = "{name} in {valueX}°C => {valueY}";
That's the first step, though. Since you are using all-ValueAxis scenario, you will also need to apply a workaround as stated in this tutorial.
am4charts.ValueAxis.prototype.getSeriesDataItem = function(series, position) {
var key = this.axisFieldName + this.axisLetter;
var value = this.positionToValue(position);
var dataItem = series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
return x[key] ? x[key] : undefined;
}, "any"));
return dataItem;
}
This will enable multi-cursors across all charts.
Or if you want to enable for just for a single axis:
valueAxisX.getSeriesDataItem = function(series, position) {
var key = this.axisFieldName + this.axisLetter;
var value = this.positionToValue(position);
var dataItem = series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
return x[key] ? x[key] : undefined;
}, "any"));
return dataItem;
}
If you don't want to show all tooltips for all the series all the time, you can set cursor's maxTooltipDistance to a small number so that multiple tooltips are shown only if target items are closely packged together, e.g.:
chart.cursor.maxTooltipDistance = 10;