Apexcharts.js: How to Export Chart as Image using external button.

[anilreddy128]

I created a dashboard with multiple apex charts controls on it. I need to give users a feature to export whole page as image. Right now, i see an option to download individual component only. But How can I call this function from outside click event to export chart as image (svg or png).

[georgehardy]

I do this using the global Apex object dataURI method:
https://apexcharts.com/docs/methods/#dataURI

This will give you a base64 encoded PNG - not sure if you can get the SVG this way.

Example function:

const saveToArchive = async (chartId) => {
  const chartInstance = window.Apex._chartInstances.find(chart => chart.id === chartId);
  const base64 = await chartInstance.chart.dataURI();
  return base64;
}

[prasad1791]

@georgehardy dateURI( ) method always returns PNG image , but what about SVG images , any idea ?

[georgehardy]

@prasad1791
You can do this using https://apexcharts.com/docs/methods/#paper

const paper = chartInstance.chart.paper()
const svg = paper.svg()

[junedchhipa]

@georgehardy Yes, that's the correct way of getting SVG string.

[prasad1791]

Yes I already implemented that in my current project thanks @georgehardy and @junedchhipa

[rujaraju]

Hi, I tried calling paper() but the result was undefined, am I doing it in the wrong place or is the method not there anymore? I would need the svg from the chart.

var chart1 = new ApexCharts(document.querySelector("#chart1"), options1);
console.log(chart1.paper())

[j-a-h-i-r]

Adding to what @rujaraju already said above, this link (https://apexcharts.com/docs/methods/#paper) does not contain any mention of the paper method. Moreover, when I searched for paper using the search function, it did not return any result. So, I guess the method is not working anymore.

[tdallagnol]

Hi

I looked at the Apex Charts source code and found a way to get the SVG.
It is not something that looks really OK, as this can change, but you can always adapt.

As the javascript is not so restrictive in messing up with internal data from the objects, I'm obtaining the svg by reading the data from:

myChartInstance.chart.w.globals.base.dom.Paper.svg()