How to add text inside the doughnut chart using Chart.js?

Question

How to render Text inside the doughnut chart, I am using ChartJs.

Answer

You have to modify the code like: in chart.Doughnut.defaults

labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"

and then in function drawPieSegments

ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

See this pull: https://github.com/nnnick/Chart.js/pull/35

here is a fiddle http://jsfiddle.net/mayankcpdixit/6xV78/ implementing the same.

Accepted Answer

You have to modify the code like:in chart.Doughnut.defaults labelFontFamily : "Arial",labelFontStyle : "normal",labelFontSize : 24,labelFontColor : "#666"and then in function drawPieSegmentsctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200); See this pull: https://github.com/nnnick/Chart.js/pull/35 here is a fiddle http://jsfiddle.net/mayankcpdixit/6xV78/ implementing the same.

Advertisement

Answer