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.

Tooltips / labels not showing for low-frequent datapoints

See original GitHub issue

Expected Behavior

When displaying a mix between very high-frequent and low-frequent categories in a chart, e.g. bar chart, all datapoints / bars together with their tooltips should be displayed.

Current Behavior

The low-frequent labels seem to be invisible, e.g. with a dataset as the following: data: [999999999999, 5555555555, 3, 5, 2, 3]

In addition, when hovering over the position where the data/bar should be, no tooltip information is displayed whereas, for the frequent ones, the labels are showing up correctly.

Possible Solution

Squeezing the axis somehow to make even very low-frequent categories visible? Or enable hovering even if the bar is not really visible. Set a minimum bar size?

Steps to Reproduce (for bugs)

https://codepen.io/isikleo/pen/rNObmyr

Context

I’m working with mixed datasets where very frequent as well as very low-frequent categories appear. It is a pity that as soon as 1 high-frequent datapoint is present all the others totally lose their weight and visibility. Is there any suggested workaround for this? Unfortunately, I couldn’t find anything in the docs.

Environment

  • Chart.js version: 2.9.3
  • Browser name and version: Chrome

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
IsabelMeranercommented, May 26, 2020

I updated the fiddle using the two suggested options: intersect: false and minBarLength: 4

https://codepen.io/isikleo/pen/KKdYGXX

This at least ensures that all labels are hoverable and a small default bar size is set for all categories, making charts with both very small and large values more appealing.

@etimberg is right though, setting a minBarLength can be misleading - using a different scale to squeeze the values might be a better solution for all those use cases where this is possible.

1reaction
benmccanncommented, May 25, 2020

There is an option for minBarSize

Using a logarithmic axis may also help reduce the difference between the smallest and largest values

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tooltips do not display the values of data points for a series for ...
CAUSE: This is working as expected. For the tooltip to show the value of a specific point in a series, the Data Labels...
Read more >
Chart.js (3.7) - Why do the tooltips not appear? - Stack Overflow
I took your code, changed the Chart.js script file (now importing from cdnjs.cloudflare.com) and added the missing canvas . The tooltips ...
Read more >
Maps that Show Density or Trends - Tableau Help
Selection, tooltips, labels, and hovering all work based on the marks in the zoom of the view. Density maps have no fixed or...
Read more >
Histogram | Charts - Google Developers
A histogram is a chart that groups numeric data into bins, displaying the bins as segmented columns. They're used to depict the distribution...
Read more >
Plot Tooltip / Mike Freeman - Observable
Data visualization developer at Observable: working to make visualization more accessible, equitable, and impactful. He/him. Fork.
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