Ng2-charts: Its imposible to add rounded corners through ng2-charts for bar chart

[timucincicek]

to have a border on the edge of bar,we need to implement that kinda .js method.

Chart.elements.Rectangle.prototype.draw = function()
{}

If a callback did exist,would be awesome.What is wanted to be achieved below

[vipuljdev]

I'm having same issue. Trying for few hours now, not finding any solution. Let me know if anyone found anything

[TurtleTower]

Please, I need that too!

[danmana]

Here is a great stackoverflow answer that covers how to draw rounded bars in detail.

The code there is for simple bar chart, not stacked, but was pretty easy to adapt - see https://codepen.io/danmana/pen/yLOGjPV?editors=1010

[IanIsFluent]

Thanks, but how do I package the JS code from Angular so that it actually affects the chart in the browser?

[danmana]

I hope this is not too late for you.

First of all, if you switched already to chart.js 3.0 beta, it has rounded corners built in - see sample and docs

For 2.9 I adapted the stackoverflow solution from above to ng2-charts:

https://stackblitz.com/edit/ng2-charts-bar-template-zdhqtt?file=src%2Fapp%2Fapp.component.ts

Important points:

• use public barChartType: ChartType = "roundedBar" as ChartType;
• datasets must set the stack { data: [65, 59, 80], stack: "a", label: "Series A" }
• you must define colors - see issue https://github.com/valor-software/ng2-charts/issues/876

[dmontidev]

var options = {
cornerRadius: 20,
};
use this option
I solve this problem with cornerRadius property