React ChartJS Donut Chart Align Rings

Question

I'm trying to have multiple rings in my donut chart, where each ring going out is more divided.

For example, if we have a list of hours worked, I want to group it by two things, user, then by job. I would want the inner ring to be a ring divided by user. Then I would want the outer ring to be by user-job, where each wedge of the inner circle has all the outer circle pieces match up so that the sub-divisions line up inside the wedge.

Here is a visual that I hope can help. The purple, blue, dark blue section are sub-groups of the red group. Same idea applies to the green/yellow/light green sub-groups and the orange group.

Please provide enough code so others can better understand or reproduce the problem. — Community, Oct 19 '21 at 00:00

score 0 · Answer 1 · answered Oct 19 '21 at 06:02

Find example of a stacked doughnut chart.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="canvas-holder" style="width:100%">
    <canvas id="chart-area" width="500" height="500" />
</div>
<script>
var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
    return Math.round(Math.random() * 255);
};

var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C",
                "#949FB1",
                "#4D5360",
            ],
        }, {
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C",
                "#949FB1",
                "#4D5360",
            ],
        }, {
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C",
                "#949FB1",
                "#4D5360",
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow",
            "Grey",
            "Dark Grey"
        ]
    },
    options: {
        responsive: true
    }
};

var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
</script>

You know would need to provide the data so as to have your explained case of use and for the subdivisions to fit in as you explained.

React ChartJS Donut Chart Align Rings

1 Answers1