javascriptchart.js

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

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

Solution

  • 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.