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.