Posted in Uncategorized

[BUG] Bar chart sometimes shows invisible bars

   February 23, 2021  1 Comment on [BUG] Bar chart sometimes shows invisible bars

Expected Behavior

Bar graph should render the bars correctly.

Current Behavior

It seems that in some cases, the bar chart does not render bars correctly, they appear invisible. The legends still show the correct data, however.

I am not entirely sure what specifically causes this, but it seems to be related to the ratios between the data values supplied. The following example shows the issue:

https://codepen.io/anon/pen/roaerZ

You’ll notice that changing the first 2 values slightly won’t change anything, but changing the 4 to anything else makes the graph render correctly. Increasing one of the numbers a lot (x10) seems to also make it render correctly.

Steps to Reproduce (for bugs)

See https://codepen.io/anon/pen/roaerZ. No interaction necessary.

Context

Our QA team noticed this in a test environment with randomised data.

Environment

  • Chart.js version: 2.7.2 (also present in 2.7.3)
  • Browser name and version: Chrome Version 70.0.3538.110 (Official Build) (64-bit)
  • Link to your project: http://simpplr.com

Author: Fantashit

1 thought on “[BUG] Bar chart sometimes shows invisible bars”

  1. Ah! In production we actually have the axis hidden, I didn’t notice the scale starting at 4 in the codepen! This does work around the issue in this case, thanks @simonbrunel.

    Then perhaps this should be changed to an improvement. I would say that beginAtZero would make sense as a default for bar charts, seems odd to start at the lowest value on a bar chart to me.

Comments are closed.