Home forums Using CanvasJS How to display chart as a static image (png, jpg)

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 2 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #15993


    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.

    Vishwas R
    Team CanvasJS


    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?

    • This reply was modified 2 years, 2 months ago by  davidr. Reason: fixed showing code


    JavaScript does not have access to the computer’s file system, please refer this link for more info. Either you can render chart as-such without interactivity or store base64 image globally and use it as image source.

    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.