Search code examples
javascriptchartschart.jsdonut-chart

Is there a way in a donut Chart.JS to show a % out of 100

I have a donut chart showing a number. However is there a way which the donut chart can be out of 100%, so the number I give in the data section: say 21, will show 21% complete out of 100?

Image to show desired outcome: donut chart

So the donut ring is greyed out and the coloured section is how much has been completed (or what number we allocate to the data section, I've been looking at the documentation and cannot see a way this can be done?

Code I have currently:

<canvas id="Chart1" style="width=5 height=5"></canvas>
<?php
    $var = 3;
?>

    var ctx = document.getElementById('Chart1').getContext('2d');
    var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',

    // The data for our dataset
        data: {
            labels: ['% Complete'],
            datasets: [{
                label: 'chart1',
                backgroundColor: 'rgb(102, 178, 255)',
                borderColor: 'rgb(102, 178, 255)',
                // Below I just pull out 1 number from the db
                data: [<?php echo $var ?>] 
            }]
        },
    });

My code outputs the below (so the 3 fills up the whole donut), whereas I would like it show 3% out of 100% complete.

chart

Solution

  • Try passing data of [3, 97]. You're trying to use it as a loading indicator but it seems designed for showing 100% of things broken into parts.

    If you pass simply [3], then that's 100% of your dataset