Doughnut spacing

May 10, 2022

I am trying to achieve effect similar to this
doughnut example
hoping to have each piece spaced out from other and if possible rounded out edges
I’m fairly new to chartjs so I haven’t had much luck finding some answers related to it

Here is my current js code for the chart

    const labelsd = <?php echo $jswallet;?>;
    const data = {
        labels: labelsd,
        datasets: [
        {
            label: "Wallets",
            data: <?php echo $jsamount;?>,
            backgroundColor: [
                "#1D7A46",
                "#C724B1",
                "#c7243f",
                "#0E75F1",
                "#2E8B57"
            ],
            borderColor: [
                "#1D7A46",
                "#C724B1",
                "#c7243f",
                "#0E75F1",
                "#1D7A46"
            ],
            borderWidth: [1, 1, 1, 1, 1]
        }
        ]
    };
    const config = {
        type: 'doughnut',
        data: data,
        options: {
            cutout: 140,
            responsive: true,
            plugins: {
                legend:{display: false},
                title: {display: false,}
            }
        },
    };
    const minutedownloads = new Chart(
        document.getElementById('dailyspendings'),
        config
    );

>Solution :

In your graph options, set cutout: "95%" and borderRadius: 3 like this

const labelsd = <?php echo $jswallet;?>;
const data = {
    labels: labelsd,
    datasets: [
    {
        label: "Wallets",
        data: <?php echo $jsamount;?>,
        backgroundColor: [
            "#1D7A46",
            "#C724B1",
            "#c7243f",
            "#0E75F1",
            "#2E8B57"
        ],
        borderColor: [
            "#1D7A46",
            "#C724B1",
            "#c7243f",
            "#0E75F1",
            "#1D7A46"
        ],
        borderWidth: [1, 1, 1, 1, 1]
    }
    ]
};
const config = {
    type: 'doughnut',
    data: data,
    options: {
        cutout: "95%",
        borderRadius: 3,
        responsive: true,
        plugins: {
            legend:{display: false},
            title: {display: false,}
        }
    },
};
const minutedownloads = new Chart(
    document.getElementById('dailyspendings'),
    config
);