Hi Andrew,

Thanks for the quick reply and here are the details you asked:

1. I could not get the exact screenshots but I can copy you some of the details of the error:

>Uncaught BaseError {_message:null, _innerException:null}

>The about error occurred in the <IgrComponentRendererContainer> component:

at IgrComponentRendererContainer

at div

at IgrSpreadsheet

at div

at div

at ModalPortal

at Modal

2. The modules I'm using are:

IgrExcelCoreModule
IgrExcelModule
IgrExcelXlsxModule
IgrSpreadsheetChartAdapterModule
IgrSpreadsheetModule
3. The version for the modules is 16.13.0

4. The sample code snippets are inserted:

import React from 'react';
import { ExcelUtility } from './ExcelUtility';
import { IgrExcelXlsxModule } from 'igniteui-react-excel';
import { IgrExcelCoreModule } from 'igniteui-react-excel';
import { IgrExcelModule } from 'igniteui-react-excel';
import { IgrSpreadsheetModule } from 'igniteui-react-spreadsheet';
import { IgrSpreadsheet } from 'igniteui-react-spreadsheet';
import { IgrSpreadsheetChartAdapterModule } from 'igniteui-react-spreadsheet-chart-adapter';
import { SpreadsheetChartAdapter } from 'igniteui-react-spreadsheet-chart-adapter';
import { Worksheet } from 'igniteui-react-excel';
import { WorksheetCell } from 'igniteui-react-excel';
import { ChartType, ChartTitle, FormattedString } from 'igniteui-react-excel';
import ReactModal from 'react-modal';


IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();
IgrSpreadsheetChartAdapterModule.register();

export default class SpreadsheetAdapterForCharts extends React.Component {
    public spreadsheet: IgrSpreadsheet;

    constructor(props: any) {
        super(props);
        this.state = {
            show:false,
        }
        this.onSpreadsheetRef = this.onSpreadsheetRef.bind(this);
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    openModal(){
        this.setState({show:true});
    }

    closeModal(){
        this.setState({show:false});
    }


    public render(): JSX.Element {
        return (
            <div className="igContainer">
                <button onClick={this.openModal}>Open</button>
                <ReactModal
                isOpen={this.state.show}
                overflow='hidden'
                onHide={this.closeModal}>
                    <div style={{display:'flex',justifyContent:'space-between'}}>
                    <button onClick = {this.closeModal}> close</button>
                    </div>
                    <IgrSpreadsheet ref={this.onSpreadsheetRef} height="calc(100% - 25px)" width="100%" />
                </ReactModal>
            </div>
        );
    }

    public onSpreadsheetRef(spreadsheet: IgrSpreadsheet) {
        if (!spreadsheet) { return; }

        this.spreadsheet = spreadsheet;
        this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();
        const url = "https://static.infragistics.com/xplatform/excel/ChartData.xlsx";
        ExcelUtility.loadFromUrl(url).then((w) => {
            this.spreadsheet.workbook = w;

            const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0);

            sheet.defaultColumnWidth = 450 * 20;
            sheet.rows(0).height = 150 * 20;

            const cell1: WorksheetCell = sheet.getCell("A1");
            const cell2: WorksheetCell = sheet.getCell("B1");
            const cell3: WorksheetCell = sheet.getCell("C1");
            const cell4: WorksheetCell = sheet.getCell("D1");

            const dataCellAddress = "A3:D6";

            const title: ChartTitle = new ChartTitle();
            title.text = new FormattedString("Line Chart");
            const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 5, y: 5 }, cell1, { x: 90, y: 90 });
            chart1.chartTitle = title;
            chart1.setSourceData(dataCellAddress, true);

            const title2: ChartTitle = new ChartTitle();
            title2.text = new FormattedString("Column Chart");
            const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 5, y: 5 }, cell2, { x: 90, y: 90 });
            chart2.chartTitle = title2;
            chart2.setSourceData(dataCellAddress, true);

            const title3: ChartTitle = new ChartTitle();
            title3.text = new FormattedString("Area Chart");
            const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 5, y: 5 }, cell3, { x: 90, y: 90 });
            chart3.chartTitle = title3;
            chart3.setSourceData(dataCellAddress, true);

            const title4: ChartTitle = new ChartTitle();
            title4.text = new FormattedString("Pie Chart");
            const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 5, y: 5 }, cell4, { x: 90, y: 90 });
            chart4.chartTitle = title4;
            chart4.setSourceData(dataCellAddress, true);
        });
    }
}

Hi Andrew,

Just wondering if there is any update regarding this base error with chartadapter.