CODEWITHSUNDEEP
chart.js
ekjcfn3902039
ekjcfn3902039

Reputation: 1839

Displaying ChartJS tooltip on mouseover of bar/line

I have the following code which shows a chart containing a line and some bars. When I hover over the line points, I see the tooltip for that line point, which is perfect. When I hover over any bar, I see a tooltip for EVERY bar as well as the line, which is bad. How do I show a tooltip that only shows the particular bar (and intersecting line if it exists) I am hovering over?

FWIW I've tried a couple variations of the tooltips/hover options based on the chartjs docs but I couldn't get any particular combination to work.

https://codepen.io/uglyhobbitfeet/pen/PooLgev?editors=1010

  tooltips: {
    mode: 'point',
  },
  hover: {
    mode: 'point',
  },

Docs are here:

Thanks!

Upvotes: 0

Views: 3983

Answers (1)

Tom Phan
Tom Phan

Reputation: 76

In your implementation, remove that piece of code.

  tooltips: {
    mode: 'point',
  },
  hover: {
    mode: 'point',
  },

and then add the mode in the tooltips a few lines down:

tooltips: {
  mode: 'point',
  callbacks: {}
}

Since the points down sit in the range of the bar chart, they aren't technically intersecting.

But if you do create a point within the range, it'll be able to pick it up on the tooltip.

Upvotes: 4

Related Questions