Pre loader

Rendering a chart in memory

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums



I want to render a base64 image in ScichartJS without actually rendering it in DOM. I saw that you have these guides in WPF:,_Printing_and_Export_to_XPS.html

However it is difficult to achieve it in Typescript. Is there a guide or any ideas on how to do it? I would appreciate any answer.

  • You must to post comments

Hi Zino

We have a related question here: How do you export or save a chart as an image in JS library?

There is also a documentation page: Export Image from Chart

This links to a solution on github: Export Chart to Image Demo

How it works

The example uses dom-to-image npm module to export the chart to PNG
image. This package exports html (used for legends), svg (used for
annotations) and canvas (used everything else) elements.

To download the image we use the file-saver module.

For the export to work correctly position: relative should be set on
the chart root element.

Does this help?

In the future: We’re aware that exporting images for reporting is a powerful use-case. Ideally we need to make a different solution as JavaScript isn’t really setup for this. A server-side engine which could export images based on chart config + data for example would better be based on another technology

Best regards,

  • You must to post comments


Thank you for the answer. In the provided solutions as I understand the image is rendered in the DOM on the canvas and then you can save the image. I have achieved that.

What I need is to render the image in memory without rendering it in DOM first. Something that was described in here:*1djbnb0*_gcl_au*NDYyOTUwOTk3LjE2ODM2MTcwNDU.
In this example as I understand the chart is not being added to the DOM but instead all the data is being passed in the memory and from there directly you can export that chart to a bitmap image.

My problem is that I have multiple chart views that I want to export as images. I am looking for a solution that could export the chart image without rendering them in the DOM first.

  • Andrew Burnett-Thompson
    This is impossible I’m afraid, the only way to render a JavaScript chart to image is to use a headless browser. What’s the issue here, is it performance? If so there may be faster ways to create or export images
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.