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

by

2👍

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>

Leave a comment