[Chartjs]-Chart.JS – Fill Donut

by

1👍

✅

Add this after options:

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    draw: function () {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);

          //find the center point
          var x = this.chart.canvas.clientWidth / 2;
          var y = this.chart.canvas.clientHeight / 2;

          //render the text
          this.chart.ctx.beginPath();
          this.chart.ctx.arc(x,y,100,0,2*Math.PI);
          this.chart.ctx.fillStyle = '#ffff00';
          this.chart.ctx.fill();
    }
});

Change myNewChart = new Chart(ct).Doughnut(data, options); to myNewChart = new Chart(ct).DoughnutAlt(data, options);

Updated fiddle

Refer to this answer: canvas fill text vanishes when hovering over chartjs pie chart

UPDATE:

Add background image:

var img = new Image();
img.src = 'path_to_image_source';

this.chart.ctx.drawImage(img,135,130);

Updated jsfiddle showing image inside donut chart

Leave a comment