Javascript examples for Chart.js:Doughnut Chart
Chartjs doughnut chart for conditional data
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script type="text/javascript" src="https://chartjs-plugin-datalabels.netlify.com/chartjs-plugin-datalabels.js"></script> <script type="text/javascript"> window.onload=function(){/* ww w . j a va2 s . c o m*/ function drawPieChart(value, maxValue) { var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Consumed"], datasets: [{ data: [value, maxValue - value], backgroundColor: ['green', 'red'], }] }, options: { tooltips: { enabled: false, }, plugins: { datalabels: { backgroundColor: function(context) { return context.dataset.backgroundColor; }, display: function(context) { var dataset = context.dataset; var value = dataset.data[context.dataIndex]; return value > 0; }, color: 'white' } } } }); } drawPieChart(5000, 5000); } </script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> </body> </html>