borderRadius gets ignored for the bottom corners of 0-value bars in bar chart when borderSkipped and minBarLength are set
See original GitHub issueExpected 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:
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:
- Created 2 years ago
- Comments:8 (8 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
If that works, I think it still needs to use the scale boundaries, to make it work with stacked scales
my thinking on using the decimal 0/1 was that I can avoid checking if it’s vertical or horizontal