ChartJS - Donut Cards with Multiple Rings

Question

Is it possible to create a donut diagram with multiple rings using ChartJS as shown below?

Answer 1

You can find a solution to the link to the violin

var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
               10,20,30
                ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }, {
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()

            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow"
        ]
    },
    options: {
        responsive: true
    }
};

Answer 2

You need to add multiple datasets to the chart. they will be displayed as needed. Look at your sample pie chart. You can download and open it locally as an example. There they have several data sets, which makes the chart the way you need it.

Hope this helped.