Home › forums › Using CanvasJS › How to display chart as a static image (png, jpg)
Tagged: image, PNG, static image
I’d like to display the chart as a static image (png, jpg, gif, etc) instead of an interactive chart. I don’t mean just turning off interactive but actually displaying it as an image, so I can use the chart on a page like as a background image or something.
How can the chart be output on the page as an image?
I searched around and couldn’t find anything. There was something here about having it fallback as a static image, but wasn’t sure what this was https://canvasjs.com/forums/topic/static-image-fallback-for-ie8-and-below/
I did find this when searching the web https://davidwalsh.name/convert-canvas-image
It says you can turn a canvas to an image but I couldn’t figure out how to do it within canvasjs.
Thanks for your help!
You can get base64 image of chart using toDataURL. And passing this image as image source will work in your case. Please check this jsfiddle.
Thanks, I got that to work but I can’t seem to get the base64 data uri image on page1 to show on page2 (to carry it over as an image). Do you think you could output it as a .png instead so I could just use some code like <img src="/file.png" /> on page2 to display it?
<img src="/file.png" />
First, thanks for this interesting tool. It seems to do exactly what i need.
However, i got an issue i can’t fix by myself.
I use a pie chart. Once it’s displayes, i neet it to be duplicate as an image i will display in the same page.
As i saw in diferent topic,
var image = new Image();
image.src = chart.canvas.toDataURL(“image/png”);
alert( image.src );
should solve the issue.
But the url inside the alert box is an empty image with the mention “Trial version”
Is that normal ? and is it the good way for my need ?
Please could you gie me a hand ?
Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, run it at our end to understand it better and help you resolve?
From what we have observed, sometimes things get delayed mostly when we are not able to reproduce your use-case or not able to understand the exact requirements. Having a JSFiddle helps us in understanding your case better and many a times we can just edit your code on JSFiddle to fix the issue right-away. I request you to brief more along with JSFiddle with your use-case if you have further queries or facing any issue.
Hi @Vishwas R
Just did this,
It works a bit differently than on my website, maybe i did something wrong, but as you can see, the donut is not displayed…
Any ideas ?
You are getting blank image instead of pie chart in the image as you are exporting chart before animation could complete. Exporting chart as image soon after animation should work fine in your case. Please take a look at this updated JSFiddle.
@Vishwas R Works like a charm !
Awesome ! Thank you for your help !
You must be logged in to reply to this topic.