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

Question

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

user_8682983 · Answer

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

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

1 Answers