KeepTargetHover Issue

[jdsmith39]

When KeepTargetHover is true, the tooltip isn't staying when hovering across X axis point values. Hopefully this illustrates what I'm doing. In the first screenshot I'm hovering over the "USA" tooltip as I move the mouse cursor to the right. Instead of keeping the USA tooltip open, the China tooltip shows, which you can see from the 2nd screenshot. The below code pen demonstrates this behavior. Code Pen

Let me know if you need anything else.

[martynasma]

This is because XYCursor is snapping to whichever column is closer.

To fix that, you need to remove tooltip from series, and add tooltipHTML directly to column templates:

var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  sequencedInterpolation: true,
  categoryXField: "country"
}));

series.getTooltip().setAll({
  keepTargetHover: true
})

series.columns.template.setAll({
  tooltipHTML: "<strong>{categoryX} this is a lot of text to make this very long</strong>: {valueY}"
})

[jdsmith39]

Thanks for the quick response! I updated the Code Pen with your suggested changes (I think) and it still doesn't keep the tooltip open while hovering on it. Also, my use case is using a LineSeries, does that change how you handle this?

[martynasma]

You have a typo in keepTargetHover.

For LineSeries, there are no hoverable elements, so you will need to add bullets to hover on.

[jdsmith39]

Thanks! Worked great for the columns.

I changed the code pen to use a LineSeries instead. Added the bullets. The tooltip shows up when hovering over the bullet, but the keepTargetHover: true isn't affecting it. What do I need to do differently here?

Code Pen

[martynasma]

Same thing as here: https://github.com/amcharts/amcharts5/issues/1735#issuecomment-2360888773

[jdsmith39]

LineSeries doesn't seem to have columns.
Throws this error: "Uncaught TypeError: Cannot read properties of undefined (reading 'template')" I updated the Code Pen to show the error. I was going through the documentation (probably missed what I needed to see) and didn't see anything else that I could put the tooltip on instead.

[martynasma]

Of course they don't. That's why you have to set it on bullets.

var series = chart.series.push(am5xy.LineSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  sequencedInterpolation: true,
  categoryXField: "country"
}));

series.getTooltip().setAll({
  keepTargetHover: true
});

series.bullets.push(function (root) {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
      radius: 7,
      fill: series.get("fill"),
      tooltipHTML: "<strong>{categoryX} this is a lot of text to make this very long</strong>: {valueY}"
    })
  });
});

[jdsmith39]

Thank you very much. That is exactly what I needed.