import { GridOptions , LineSparklineOptions , TooltipRendererParams , } from '@ag-grid-community/core' ; const body = document . body ; const gridOptions = { columnDefs : [ { field : 'symbol' , maxWidth : 120 } , { field : 'name' , minWidth : 250 } , { field : 'change' , cellRenderer : 'agSparklineCellRenderer' , cellRendererParams : { sparklineOptions : { tooltip : { container : body , xOffset : 0 , yOffset : 20 , renderer : tooltipRenderer , } , highlightStyle : { size : 5 , fill : 'rgb(0, 113, 235)' , strokeWidth : 0 , } , } as LineSparklineOptions , } , } , { field : 'volume' , type : 'numericColumn' , maxWidth : 140 , } , ] , defaultColDef : { flex : 1 , minWidth : 100 , resizable : true , } , rowData : getData ( ) , rowHeight : 50 , } ; function tooltipRenderer ( params ) { const { yValue , context } = params ; return `<div class='sparkline-tooltip'>
            <div class='tooltip-title'>${ context . data . symbol }</div>
            <div class='tooltip-content'>${ yValue }</div>
         </div>` ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;