Is there a way to create rounded arcs with spacings in a Chart.js Doughnut Chart similar to the example shown here?
https://i.sstatic.net/66A2Z.png
I have attempted to achieve this by adjusting the "borderRadius" and "offset" properties in the Dataset Properties as well as the arc spacing, but so far it hasn't worked.
I am using 'vue3-chart-v2' in my Vue 3 App.
Here is my code:
import { defineComponent } from ‘vue’;
import { Doughnut } from ‘vue3-chart-v2’;
export default defineComponent({
name: ‘PieChart’,
extends: Doughnut,
props: {
carbonData: Object
},
data() {
return {
chartData: {
labels: [‘A’, ‘B’, ‘C’, ‘D’],
datasets: [
{
data: [ this.carbonData.slabs, this.carbonData.columns,
this.carbonData.foundation, this.carbonData.core ],
backgroundColor: [‘rgba(143, 188, 143, 0.7)’, ‘rgba(135, 206, 250, 0.7)’, ‘rgba(205, 133,63, 0.7)’, ‘rgba(230, 78, 62, 0.7)’],
offset: 1,
weight: 1,
borderWidth: 1,
borderRadius: 15
}
]
},
options: {
elements: {
arc: {
spacing: 15
}
},
cutoutPercentage: 70,
responsive: true,
maintainAspectRatio: false,
legend: {
position: ‘right’,
}
}
}
},
mounted () {
this.renderPieChart();
},
methods: {
renderPieChart() {
this.renderChart(this.chartData, this.options);
}
},
})