TAGS :Viewed: 3 - Published at: a few seconds ago

[ Chart.js Picture inside doughnut segment ]

I found out about chart.js and I am looking to use a doughnut chart for my website, I found a example where I can take the basics from : https://jsfiddle.net/9wp4f693/2/

I've only found something like this, but it was to draw text inside the segments, not to add pictures.

function drawSegmentValues()
{
    for(var i=0; i<myDoughnutChart.segments.length; i++) 
    {
        ctx.fillStyle="white";
        var textSize = myChart.width/10;
        ctx.font= textSize+"px Verdana";
        // Get needed variables
        var value = myDoughnutChart.segments[i].value;
        var startAngle = myDoughnutChart.segments[i].startAngle;
        var endAngle = myDoughnutChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        // Text offside by middle
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}

But I would like to have pictures inside my segments, something like this but I have no clue how I would do this :

enter imagehere

Answer 1


There is no native ChartJS API for drawing an image inside a donut chart.

But you can manually add the images after the chart has been drawn.

For each wedge in the donut:

Warning: untested code ... some tweaking might be required

  1. Translate inward to the middle of the donut.

    // calculate donut center (cx,cy) & translate to it
    var cx=chart.width/2;
    var cy=chart.height/2;
    context.translate(cx,cy);
    
  2. Rotate to the mid-angle of the target donut-wedge

    var startAngle = chart.segments[thisWedgeIndex].startAngle;
    var endAngle = chart.segments[thisWedgeIndex].endAngle;
    var midAngle = startAngle+(endAngle-startAngle)/2;
    
    // rotate by the midAngle
    context.rotate(midAngle);
    
  3. Translate outward to the midpoint of the target donut-wedge:

    // given the donut radius (innerRadius) and donut radius (radius)
    var midWedgeRadius=chart.innerRadius+(chart.radius-chart.innerRadius)/2;
    context.translate(midWedgeRadius,0);
    
  4. Draw the image offset by half the image width & height:

    // given the image width & height
    context.drawImage(theImage,-theImage.width/2,-theImage.height/2);
    
  5. Clean up the transformations by resetting the transform matrix to default:

    // undo translate & rotate
    context.setTransform(1,0,0,1,0,0);