import { ChartModel , ChartRef , GridOptions } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { field : 'country' , chartDataType : 'category' } , { field : 'sugar' , chartDataType : 'series' } , { field : 'fat' , chartDataType : 'series' } , { field : 'weight' , chartDataType : 'series' } , ] , defaultColDef : { editable : true , sortable : true , flex : 1 , minWidth : 100 , filter : true , resizable : true , } , rowData : getData ( ) , enableRangeSelection : true , popupParent : document . body , enableCharts : true , createChartContainer : createChartContainer , } ; var chartModel ; var currentChartRef ; function saveChart ( ) { var chartModels = gridOptions . api ! . getChartModels ( ) || [ ] ; if ( chartModels . length > 0 ) { chartModel = chartModels [ 0 ] ; } alert ( 'Chart saved!' ) ; } function clearChart ( ) { if ( currentChartRef ) { currentChartRef . destroyChart ( ) ; currentChartRef = null ; } } function restoreChart ( ) { if ( ! chartModel ) return ; currentChartRef = gridOptions . api ! . restoreChart ( chartModel ) ! ; } function createChartContainer ( chartRef ) { if ( currentChartRef ) { currentChartRef . destroyChart ( ) ; } var eChart = chartRef . chartElement ; var eParent = document . querySelector ( '#myChart' ) as any ; eParent . appendChild ( eChart ) ; currentChartRef = chartRef ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;