Javascript examples for Chart.js:Doughnut Chart
Adding text inside 2 different Doughnuts chart using chartjs
<html> <head> <title>Two DoughnutChart </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script> <script type="text/javascript"> window.onload=function(){//from w w w.java 2 s . c o m var data = { labels: [ "White", "Blue", "Yellow" ], datasets: [ { data: [300, 50, 100], backgroundColor: [ "#FFF", "#36A2EB", "#FFCC54" ], hoverBackgroundColor: [ "#FFF", "#36A2EB", "#FFCC54" ] }] }; var data2 = { labels: [ "Green", "Yellow", "Red" ], datasets: [ { data: [50, 20, 400], backgroundColor: [ "#FF6283", "#36A2EB", "#FFCC54" ], hoverBackgroundColor: [ "#FF6283", "#36A2EB", "#FFCC54" ] }] }; var DeliveryChart = new Chart(document.getElementById('myChart'), { type: 'doughnut', elementById:('myChart'), data: data, options: { responsive: true, legend: { display: false }, title: { display: true, text: 'October' } } }); var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), { type: 'doughnut', elementById:['myChart1'], data: data2, options: { responsive: true, legend: { display: false }, title: { display: true, text: 'November' } } }); Chart.pluginService.register({ beforeDraw: function(chart) { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx; ctx.restore(); var fontSize = (height / 114).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; console.log (chart.options.title.text); var text = chart.options.title.text; textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); } }); } </script> </head> <body> <canvas id="myChart"></canvas> <canvas id="myChart1"></canvas> </body> </html>