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 partially disabled on bar graph when scales > y > beginAtZero set to false

See original GitHub issue

Expected Behaviour

All tooltips show on hover, since I have not changed any settings for them.

Current Behaviour

Tooltips do not show on hover.

Steps to Reproduce

Create any bar chart and within the options add:

options: {
   scales: {
      y: {
         beginAtZero: false // <-- this is the line that breaks stuff
      }
   }
}

For creating random data I use the following:

const makeData = () => {
   var list = [];
   for (var i = 0; i < barChartLabels.length; i++) {
      list.push(Math.floor(Math.random() * 50 + 250));
   }
   return list;
}

Edit: Further testing has revealed that the + 250 part of the data creation is what is breaking things. The size of that number is not the issue though, since I have recreated the disappearing tooltips with as low a number as 5. However this breaks some of the tooltips instead of all of them.

Context

I want to be able to analyse each value if necessary. With such large values, adding minor gridlines between the major ones shown is an unrealistic solution so the tooltips are needed.

Environment

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
etimbergcommented, Jul 16, 2021

I feel like this might have been caused by some changes that no longer clip the bar size to the visible space. I would think that any bar that is visible should be interactable.

0reactions
GeneralPeacefulcommented, Jul 16, 2021

Half width sounds like the best solution, since that should also work for large negative numbers as well.

Read more comments on GitHub >

github_iconTop Results From Across the Web

v3.8.0: Odd behavior for tooltip on horizontal bar with ... - GitHub
I followed the instructions for making a horizontal bar chart, ... y: { beginAtZero: true, min: 0, max: 100, ticks: {display: false}, ...
Read more >
Hide/disable tooltips chart.js - Stack Overflow
I have tried this code, but they never hide. Chart.defaults.global.tooltipenabled = false;. You can see all the code here of the chart: https://jsfiddle ......
Read more >
Line Chart - Chart.js
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the...
Read more >
search_plus_index.json - UNPKG - chart.js
In this example, we create a bar chart for a single dataset and render that in ... can help you customise your charts...
Read more >
Tooltips | Charts - Google Developers
You can see the tooltip by hovering your mouse over any of the bars in the chart. Hover over the bars to see...
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