Chartjs-ChartJS 6.2 – fillText() always uses last ctx.font settings

by

1👍

✅

I think you should include your context 2D statement saving and restoring the context (in2 plugins) as following:

                ctx.save(); // saves previous config
                ctx.font = "bold 16px Arial";
                ctx.fillStyle = 'rgb(0, 0, 255,1)';
                ctx.fillText( 20, 70, 130 );
                ctx.restore(); // restores previous config

Plugin:

var chartjs_draw_in_doughnut_plugin = {
  afterDatasetsDraw: function(chart, args, options) {
    // Get ctx from string
    const ctx = chart.ctx;
    // saves the state of the canvas
    ctx.save();
    // ------------
    // FIRST LABEL
    // ------------
    // creates new path to draw something with the same config
    ctx.beginPath();
    // sets config  
    ctx.font = "bold 16px Arial";
    ctx.fillStyle = 'rgb(0, 0, 255,1)';
    ctx.fillText( 20, 70, 130 );
    // fills text
    ctx.fill();
    // ------------
    // SECOND LABEL
    // ------------
    // creates new path to draw something with the same config
    ctx.beginPath();
    // sets config  
    ctx.font = "regular 16px Arial";
    ctx.fillStyle = 'rgb(0, 0, 255,0.5)';
    ctx.fillText( ' / 50', 85, 130 );
    // fills text
    ctx.fill();
    // restores the state of the canvas
    ctx.restore();
  }
}

Leave a comment