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 months, 1 week ago.

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

    davidr
    Member

    Hi,

    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!

    #15997

    Vishwas R
    Keymaster

    @davidr.

    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

    #16004

    davidr
    Member

    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 months, 1 week ago by  davidr. Reason: fixed showing code
    #16009

    Vishwas R
    Keymaster

    @davidr,

    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.