Apexcharts Synchronized Line Charts

Question

I developed an angular application with three synchronized line charts (let's assume this is a very helpful example: https://apexcharts.com/angular-chart-demos/line-charts/syncing-charts/ ).

Now, I cannot find a way to use the toolbar export functionality for all three charts at the same time. I mean: if I click the export PNG button, it exports just one of the three charts. Is it possible to have a kind of "general" export functionality that involves all the charts belonging to the same chart group?

Answer 1

I think the only option is to add a custom menu icon that will download all of them https://apexcharts.com/docs/options/chart/toolbar/#customIcons

And for click method

click: async () => {
    let ids = ['chart1', 'chart2'] // you can't select chart by group so we need all ids
    for await (let id of ids) {
        let dataURI = await ApexCharts.exec(id, 'dataURI')
        fetch(dataURI.imgURI).then(res => res.blob()).then(res2 => {
            let url = URL.createObjectURL(res2)
            let a = document.createElement("a");
            a.href = url
            a.download=`${id}.png`
            a.click();
        })
    }
}