chartjs-node icon indicating copy to clipboard operation
chartjs-node copied to clipboard

Fix for black background on jpeg output

Open el opened this issue 6 years ago • 3 comments

Hi, I tried to export the image as jpeg but because of the way canvas handles transparency, the background becomes black:

testimage

The fix is adding a white rectangle to the background, like this:

    plugins: {
      beforeDraw: function (chart, easing) {
        var ctx = chart.chart.ctx;
        ctx.save();
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
      }
    }

testimage-w

Maybe this info can be added to wiki or depending on the output, it can be added automatically.

el avatar Oct 16 '18 21:10 el

Thanks for this! Saved me some headache.

solomania9 avatar Jan 04 '19 11:01 solomania9

Thank you @el I can't understand why chartjs doesn't have a native background property for this purpose.

doleron avatar Jun 19 '20 22:06 doleron

Thanks! This is very useful!

uzkha avatar Jan 19 '21 00:01 uzkha