I am developing a datetime series line chart of efficiencies (in percentage) over time.

I need a tooltip to display information about each point on the chart, but I am finding that it is difficult to hover over points which coincide with the line or marker of another series.

The chart will be static in nature in that users will not be able to remove series from the chart - so they wouldn't be able to remove a series in order to be able to get more easily hover over the desired point.

In this demo - https://jsfiddle.net/slaws/37y4cteq/10/ - it takes many attempts moving the cursor in that area to get the tooltip for the last point in the series with the black markers to show.

Here I moved my cursor around the area marked in red, but couldn't get the tooltip for any points other than one shown to display.

I had to follow a specific procedure and get my cursor to a specific point to be able to hover over the black marker and get the tooltip to display. Here I had to hover over the second to last black marker and then move the cursor to the point indicated to get the tooltip for the last marker to display.

I have tried using the findNearestPointBy (x, y and xy) in combination with stickyTracking (true and false), with no improvement.

        "stickyTracking": false,
        "findNearestPointBy": 'y'

I read something about a direct hover mode rather than nearest neighbor but found no details about how to implement that.

Any guidance on how I can make it easier for my users to display the tooltips in my use case would be greatly appreciated!