question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltip in 'x' mode doesn't always show all labels on the same X axis value

See original GitHub issue

Expected Behavior

A tooltip must always show labels for all displayed chart datasets.

Current Behavior

Sometimes all labels don’t get displayed in the tooltip.

Label callback doesn’t get invoked for some chart datasets that visible on chart (blue and pink).

Screen Shot 2020-08-26 at 9 38 07 PM Screen Shot 2020-08-26 at 9 38 27 PM Screen Shot 2020-08-26 at 9 38 46 PM

Possible Solution

The datasets may get filtered out for tooltip labels callback based on some unknown condition. This should be fixed to always invoke label callback for each of the chart dataset.

Steps to Reproduce

  1. Set a tooltip mode to 'x' and intersect to false
  2. Add a label callback to the tooltip callbacks to render the labels
  3. Hover over the chart at different x points.
  4. label callback sometimes doesn’t get triggered for certain datasets at different x points so the labels don’t get rendered to the tooltip

Context

User should be able to see all dataset labels hovering at any chart x.

Environment

  • Chart.js version: 2.9.20
  • Browser name and version: Chrome 84.0.4147.135 (Official Build) (64-bit)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
etimbergcommented, Oct 18, 2020

@Speculative the hover mode is configured independently from the tooltip mode. See https://jsfiddle.net/2qt6dncz/

1reaction
mrmonroecommented, Oct 2, 2020

I have this issue currently with an enterprise solution my dev team is building. I’ll work on a reproduction and get back to you guys.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chart.js - Hover labels to display data for all data points on x ...
What I'd like is the following: when you hover anywhere on the chart, it will display the labels + values for all data...
Read more >
chart.js tooltip for x axis values - MSDN - Microsoft
I'm trying to display part of the string on x axis label points on bar chart using chart.js if string is longer than...
Read more >
Tooltips are not showing on Line Chart
Hi! It is like you are showing right there. There are two reason when you can't see your value in tooltip. The first...
Read more >
Tooltip - Chart.js
Name, Type, Default, Description. enabled, boolean, true, Are on-canvas tooltips enabled? external, function, null, See external tooltip ...
Read more >
Create Views for Tooltips (Viz in Tooltip) - Tableau Help
As you craft views and look for ways to reveal more details about data to your audience, you can embed visualizations within tooltips—also...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found