Put numbers in graphics

Question

How can i input numbers into the doughnuts graphics?

I need that shows the percentage of each element. I started now see the chart JS, can I do it?

I would like to show like these

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
       labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

score 0 · Answer 1 · answered Oct 03 '16 at 19:14

When you input your data into the Chart object, you can modify the data array to be in percentage. For example:

original_data=[300, 50, 100];
var data=[];
var total=300+50+100 //You can also calculate the total sum with another for loop...
for(var i = 0; i < original_data.length;i++){
    data[i]=original_data[i]/total*100;
}

I know that it's not the most beautiful answer, but it works...

Put numbers in graphics

1 Answers1