How to add rounded corners to a doughnut chart?

[AnaTorres88]

I've been trying to add rounded corners to a doughnut/gauge chart. I've tried to use ViewChild to try to manipulate the canvas with no success.

Has someone encountered this problem before? What's the best way to solve it?

https://stackblitz.com/edit/chartjs-angular-pupzff

[paviad]

Stackblitz in link doesn't exist.

[mahsaml90]

Your link is not available , I used chart options to handle gauge chart, it may help you too.

public chartOptions: any = {
        scaleShowVerticalLines: false,
        responsive: true,
        circumference: Math.PI,
        rotation: Math.PI,
        cutoutPercentage: 80, // precent
        plugins: {
            datalabels: {
                backgroundColor: 'rgba(0, 0, 0, 0.7)',
                borderColor: '#ffffff',
                color: function (context) {
                    return context.dataset.backgroundColor;
                },
                font: function (context) {
                    var w = context.chart.width;
                    return {
                        size: w < 512 ? 18 : 20
                    }
                },
                align: 'start',
                anchor: 'start',
                offset: 10,
                borderRadius: 4,
                borderWidth: 1,
                formatter: function (value, context) {
                    var i = context.dataIndex;
                    var len = context.dataset.data.length - 1;
                    if (i == len) {
                        return null;
                    }
                    return value + ' mph';
                }
            }
        },
        legend: {
            display: false
        },
        tooltips: {
            enabled: `false`
        }
    };

[AnaTorres88]

Sorry, this is the link.

https://stackblitz.com/edit/chartjs-angular-comp

[Ranindu15]

I'm also finding solution for this. please can you update the answer

[santam85]

Not an issue. Refer to the the Chart.js documentation to learn how to configure charts.