Aquí estoy usando la biblioteca devextreme para gráficos en mi proyecto angular. Cuando quiero exportar mi gráfico, por ejemplo, si tengo un gráfico de 40 columnas (barras), entonces quiero dividirlo en varias instancias, cada una de las cuales muestra 10 columnas para que los datos completos puedan verse dentro de un solo archivo exportado. Aquí he usado @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent . En la función onExporting, estoy cambiando el rango visual y quiero guardar por separado cada nueva instancia del gráfico para poder exportar todas las instancias diferentes en un solo archivo. ¿Cómo puedo tener varias instancias para exportar?

 @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; } }