Question

0

261

Views

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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T21:35:11.278Z

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>

0

261

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

1 answers

0

Find remote jobs

Andres GPT