Here I'm using devextreme library for charts in my angular project. When I want to export my chart, for example if I have a chart of like 40 columns(bars) then I want to break it into multiple instances each displaying 10 columns so that entire data could be viewed inside single exported file. Here I've used @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent. In the onExporting function I am changing the visual range and I want to save separately each new instance of chart so that I could export all different instances in a single file. How can I have multiple instances to export?

@ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;


export(i) {
        const chartInstance = this.chart.instance;
        exportWidgets([[chartInstance]], {
            fileName: `Page${i + 1}`,
            format: 'PNG',
        });
      }

    onExporting(e) {
        e.cancel = true;
        this.currentRange = e.component.getArgumentAxis().visualRange();
        console.log(e.component.getArgumentAxis().visualRange());
        for (let i = 0; i < Math.ceil(this.dataSource.length / 12); i++) {
            e.component.getArgumentAxis().visualRange({startValue: this.dataSource[this.startingPoint].firstSection, length: 12});
            console.log(e.component.getArgumentAxis().visualRange());
            this.export(i);
            this.startingPoint += 12;
        }
      }