Pre loader

Store an PNG Image of scichart Surface in Clipboard in JavaScript



Is there any way to Create an image (as png) of an scichart surface and store it in Clipboard for later use in javascript?

  • You must to post comments

Hi Ferdinand,

In fact, copying a SciChartSurface to the clipboard involves two steps:

1.Converting the SciChartSurface into an image. Right now we do not have an API to do it right away, but you can use
a) canvas2d.toDataURL(), but this won’t save svg annotations and legends
b) if you have Node.js environment use Puppeteer headless browser to create images.

const puppeteer = require("puppeteer");

// const url = "";
const url = "http://localhost:5000";

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.waitForSelector("#scichart-root", {
    visible: true,
  await page.screenshot({
    path: "testImgGeneration/test1.png",
    clip: { x: 0, y: 0, width: 900, height: 600 },

  await browser.close();

2.Copying image to the clipboard navigator.clipboard.writeText()

Best regards,

  • Andrew Burnett-Thompson
    Note: screenshot and render-to-image APIs are on our roadmap for SciChart.js v2.x as well
  • René Völkel
    Any update on screenshots in v2.x? I used the toDataURL() approach which worked good enough with v1.x, but now in v2.x the background is transparent when using the same approach.
  • René Völkel
    I solved it myself by creating a dummy canvas which I paint white first and then draw the exisiting image from the scichart canvas onto it. So an extra step is needed now.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies