Exporting images

In this example, we’ll see how to export the current visual content of a Chart as a PNG image.

To start off, let’s first instantiate a Chart and render some glyphs:

let chart = new soda.Chart({
  selector: "#soda-chart",
  axis: true,
  zoomable: true
});

let ann: Soda.Annotation = soda.generateAnnotations({
  n: 10
})

chart.render({
  annotations: ann
})

Once we have a Chart rendered the way we want it, we simply have to call the exportPng function, which takes an ExportConfig object as an argument.

// when this function is called, the PNG
// will start to download in your browser
soda.exportPng({
  chart: chart,
  filename: "soda-chart.png"
})

Instead, you may want to bind the download function to a button on your page. To accomplish that, you might write something like:

// this assumes the DOM has a button with the id "save-image"
// we'll need to wrap the call to exportPng() in an anonymous
// function so we can pass the appropriate arguments
document.getElementById("save-image").onclick = () => soda.exportPng({
  chart: chart,
  filename: "soda-chart.png"
});

---

See the Pen SODA export png by Jack Roddy (@jackroddy) on CodePen.