Accepted answer

actually you can do this with a simple extension of the chart type you are using and moving your draw code to inside the draw override


enter image description here


    name: "doughnutalt",
    draw: function () {
        chart.types.doughnut.prototype.draw.apply(this, arguments);

        this.chart.ctx.textbaseline = "middle";
        this.chart.ctx.fillstyle = 'black'
        this.chart.ctx.font = "50px roboto";
        this.chart.ctx.textalign = "center";
        this.chart.ctx.filltext(distributionchartdata[3] + " %", 135, 120);
        this.chart.ctx.font = "20px roboto";
        this.chart.ctx.filltext((distributionchartdata[0] + distributionchartdata[1] + distributionchartdata[2]) + " responses", 135, 160);

var piechart = document.getelementbyid("piechart").getcontext("2d");
new chart(piechart).doughnutalt(piedata, {
    percentageinnercutout: 80, animationeasing: "easeoutquart"

fiddle -


i think you can set option: {animation: false} on your chartjs settings to solve this.


chartjs will redraw itself as needed (for example when displaying tooltips), so you must redraw your "% and responses" text whenever chartjs refreshes (redraws) the chart.

you can set chartjs's 'onanimationcomplete' callback to draw your call your "% and responses" text when chartjs has completed it's own drawing and animating.

[ addition: ]

i've taken a look at the chartjs source code and the issues on github.

there is currently no way within the chartjs api to trigger redraws of your custom text (your "% and responses") after a tooltip closes.

one workaround would be to use css to place a div with your "% and responses" over the chart.

Related Query

More Query from same tag