CODEWITHSUNDEEP
chart.js
David G
David G

Reputation: 337

chart.js tooltip position, tooltip not displayed

I have a line chart with two datasets. Initially the Y Axis is 0-100. The first line is roughly a straight line around a value of say 70, the second line is all below say 30. If I zoom the chart vertically by forcing the Y Axis min to 65 and max 75 (ie I want to exam the first line expanded vertically) then when I hover over a data point, the tooltip is missing. Actually I figure it is off the chart (so to speak :-) ).

The tooltip seems to be automatically positioned vertically between the lowest and highest data points, even if one of those data points is way below the chart.

My question: is this a bug or is there a way I can tell chart.js to ignore data points that are off chart when determining tooltip vertical position?

I'd even be happy if the tooltip was always at a fixed vertical position, ie across the top of the chart or centred vertically on the chart.

Using chart.js V2.7.1

Upvotes: 1

Views: 3005

Answers (1)

timclutton
timclutton

Reputation: 13024

Tooltips have two positioning modes, as per the documentation:

Possible modes are:

  • 'average'
  • 'nearest'

'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.

You can see both modes in operation at the relevant samples page.

average is the default mode. From your description, switching to nearest should resolve your issue.

Upvotes: 2

Related Questions