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.

borderRadius gets ignored for the bottom corners of 0-value bars in bar chart when borderSkipped and minBarLength are set

See original GitHub issue

Expected Behavior

When setting the following properties on a dataset:

minBarLength: 50,
borderRadius: 100,
borderSkipped: false,

bars with a value of 0 should show up as a circle with all corners respecting the borderRadius setting

Current Behavior

bars with a value of 0 are showing up instead with the bottom two corners ignoring the borderRadius setting and rendering as semi-circles with flat bottoms, like this: Screen Shot 2021-12-17 at 12 18 06 PM

Steps to Reproduce

Example: https://codepen.io/dcj/pen/VwMbGZM

Context

Trying to respect the designed version of the chart, where the value of some bars will be 0, and want to render those in a consistent way that respects the design

Environment

  • Chart.js version: latest
  • Browser name and version: happens the same in latest version of Safari, Chrome, Brave, Firefox
  • Link to your project: [I can add a GitHub link to a PR where this will live, but it’s not clean enough to push up yet]

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
kurklecommented, Feb 13, 2022

If that works, I think it still needs to use the scale boundaries, to make it work with stacked scales

0reactions
etimbergcommented, Feb 13, 2022

my thinking on using the decimal 0/1 was that I can avoid checking if it’s vertical or horizontal

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bar Chart Border Radius | Chart.js
Bar Chart Border Radius ... const config = { type: 'bar', data: data, options: { responsive: true, plugins: { legend: { position: 'top',...
Read more >
Documentation: DevExtreme - JavaScript Chart Bar Series
Controls the padding and consequently the width of all bars in a series using relative units. Ignored if the barWidth property is set....
Read more >
Rounded corners on chartJS v.2 - bar charts (with negative ...
I've used the answer here: How to create rounded bars for Bar Chart.js v2? provided by jordanwillis (https://stackoverflow.com/users/7581592/ ...
Read more >
plotOptions.bar.borderRadius | highcharts API Reference
A bar series is a special type of column series where the columns are ... Options for all series in a chart are...
Read more >
Bar chart with circular shape from corner in Chart.js - Devsheet
Top only circular bars. If you want to make the bar columns circular from the top only, you can set borderSkipped property to...
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