SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components



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.