'Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)

does someone know how I can achieve the effect of rounded arcs with spacings in a Chart.js Doughnut Chart like this.

I have already tried to achieve this by changing (upload://q49XACiQjrYvE0H2nZUWZaLcq6G.png) the “borderRadius” and “offset” properties in the Dataset Properties and the arc spacing, but that didn’t help.

I am using ‘vue3-chart-v2’ in my Vue 3 App.

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);
    }
},
})

Solution 1:^[1]

Only thing I can think off is that you are using chart.js V3.0.0. Because the borderRadius for the arcs got introduced and the spacing did not work until V3.4.0. So if you use chart.js V3.4.0 or later it should work fine:

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    }]
  },
  options: {
    cutout: '90%',
    radius: '90%',
    plugins: {
      legend: {
        display: false
      }
    },
    elements: {
      arc: {
        spacing: 50,
        borderRadius: 15
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	LeeLenalee

'Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]