Save chart as image without filling the canvas

[sim186]

Hi,

I have a question: Is it possibile to generate a chart without filling the canvas. I would like to generate a chart and save it directly to an image and after fill an img element with the generated image.

Is it possibile?

[stockiNail]

@sim186 have a look here: https://codepen.io/stockinail/pen/ExbLeNG

[sim186]

Thanks for your suggestions @stockiNail. It worked, the only problem is that I want also to print the page, but as soon I try to print it I got this exception: myChart is not defined. Is there a special settings to work with printable chart? I also support for printing I have to deactivate the animations.

[LeeLenaleee]

The afterdraw hook gets the chart as the first parameter so you can also call it on that

      afterDraw(chart) {
        const img = document.getElementById("myChartImg");
        img.src = chart.toBase64Image();
      }

Although I don't know if he chart will be draw as soon as the page is loaded initially

[sim186]

My question currently was a bit different. I would like to generate a graph without filling the html chart element but only save a png or jpg image locally. Is that possible?

[LeeLenaleee]

No you can not do that, you will always need to have a canvas on which it gets drawn.

You can use a few workarounds:

• (Chromium browsers only) You can use the ofscreen canvas API to render the chart and then download it
• You canrender it on a normal canvas with animations disabled, download it and remove the canvas from your page
• You can use a ssr version of chart.js