0

Estoy haciendo un gráfico de rosquillas con Chart.JS que se parece al diseño, lo he hecho pero no es un círculo perfecto y es muy triangular. Gracias por su ayuda.

introducir la descripción de la imagen aquí

const ctxx = document.getElementById('myChartt'); const myChartt = new Chart(ctxx, {
type: 'doughnut',
data: {
    labels: ['Mo', 'Tu', 'We'],
    datasets: [{
        label: 'Stock de productos',
        data: [6, 6, 6],
        backgroundColor: [
            'rgba(250, 107, 250)',
            'rgba(231, 73, 231)',
            'rgba(202, 65, 202)',
        ],
        borderWidth: 0,
        cutout: '80',
        borderRadius: 40,
        offset: -58

    }]
},
options: {
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false
        },
    }
} });

1 respuesta 1

1

Debes cambiar offset por spacing y sacar cutout

const ctxx = document.getElementById('myChartt'); 
const myChartt = new Chart(ctxx, {
type: 'doughnut',
data: {
    labels: ['Mo', 'Tu', 'We'],
    datasets: [{
        label: 'Stock de productos',
        data: [6, 6, 6],
        backgroundColor: [
            'rgba(250, 107, 250)',
            'rgba(231, 73, 231)',
            'rgba(202, 65, 202)',
        ],
         borderWidth: 0,
        borderRadius: 40,
        spacing: -58

    }]
},
options: {
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false
        },
    }
} });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="myChartt"></canvas>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.