Chart.js: Tooltips / labels not showing for low-frequent datapoints

[IsabelMeraner]

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

[etimberg]

@IsabelMeraner the issue is that the default settings require intersecting with the bars to make them appear. Since the small bars are almost 0 pixels tall, its impossible to make it intersect.

A quick work around is to add this to your options passed to the chart. It changes the behaviour to no longer require intersect, but it might not be exactly what you want.

tooltips: {
  intersect: false
}

[IsabelMeraner]

@etimberg

Thanks for suggesting this nice workaround so quickly!
This can be a solution, so at least the user knows that it is a very low-frequent category when hovering over its position.

Ideally, a minimum bar size should be rendered as it would make it even more intuitive for a user to click or hover over the label.

[benmccann]

There is an option for minBarSize

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

[etimberg]

Min bar size is a bit of a so-so solution IMO. It solves the problem of seeing the bar, but it also makes the chart a bit misleading since just looking at the bar doesn't show the real data value. I haven't thought of a better solution though

[IsabelMeraner]

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.