Put numbers in graphics
<p>How can i input numbers into the doughnuts graphics?</p>

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

<p>I would like to show like these<a href="https://i.stack.imgur.com/Z9vPy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z9vPy.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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
                }
            }]
        }
    }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"&gt;&lt;/script&gt;
&lt;canvas id="myChart" width="400" height="200"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>