historydev

<template>
    <div class="doughnut">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {
    Chart,
    DoughnutController,
    ArcElement,
} from 'https://cdn.skypack.dev/chart.js@4.2.1';
  
Chart.register(
    DoughnutController,
    ArcElement,
);

const chart = ref(null);

const data = {
    datasets: [
        {
            data: [40, 22, 8, 30],
            backgroundColor: [
                "#F04B92",
                "#54B2FD",
                "#FFC24B",
                "#49EBCE",
            ],
            display: true,
            offset: 2,
            spacing: -30,
            borderColor: "#fff",
            borderWidth: 2,
            borderRadius: [
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 16, innerStart: 16, innerEnd: 16}
            ],
            cutout: "58%",
        }
    ],
    labels: false
};

const config = {
    type: 'doughnut',
    data,
    options: {
        rotation: 270,
        circumference: 180,
        maintainAspectRatio: false,
        responsive: true,
        animation: {
            animateRotate: true
        }
    },
}

onMounted(() => {
  
    const myChart = new Chart(
        chart.value,
        config
    );
  
    const ctx = myChart.canvas.getContext("2d");

    ctx.scale(0.8, 0.8);
});
  
  

</script>

function getLabel() {
   return `<span class='customPercents'>${this.getPercentage(dataset, element, index)}%</span>`;
}