

The illustration below shows how editing cell data in the grid updates the chart: Application updates that change grid data will also be reflected in the charts. These updates could be due to user actions when cell editing, filtering, sorting, etc. Data ChangesĪny updates to data in the grid are immediately shown in the charts.
#Ag grid context menu series
Notice that when the category and series columns are changed the chart range is also updated to reflect the new chart data. This panel allows users to change the category and series columns used in the chart. The second toolbar item launches the Chart Data Panel. We plan more chart types to be added soon. In this first release the most popular charts are included. This panel allows users to change the selected chart type and color palette as demonstrated below: The first item in the toolbar launches the Chart Settings Panel. The toolbar appears when the mouse hovers over the top right area of the chart. Once a chart is created, users can perform further actions from the Chart Toolbar. Also notice while adjusting the chart ranges the chart becomes partially transparent to help see the grid data. Notice that the category and series ranges are kept in sync as the number of rows in the series range changes. This can be used to adjust the range of data as illustrated below: Adjusting Chart RangesĪ Range Handle appears at the bottom right of the series range. country names) or series columns (the numeric values getting charted). The columns are identified as chart category columns (these appear on an axis e.g. These highlight the category and series data being charted. Users start by selecting a range of cells and then choosing a chart from the grids context menu as shown below:Ĭhart Ranges appear in the grid when the chart is created. The idea here is to give users a charting experience like that found in spreadsheet applications such as Excel but even better as it can be done inside your applications. To kick things off, let’s take a look at how application users can now create charts from inside the grid. This level of integration means both application users and developers are capable of creating charts from the data inside the grid. The charts in ag-Grid are tightly integrated such that the charting component understands the columns and rows contained in the grid. Six months later we are very excited to announce that Integrated Chartsare now available in ag-Grid Enterprise v21.

Instead, what developers are searching for is a grid with integrated charts. Probing further we discovered that while some companies may provide a grid and a charting library, it’s up to the developer to tie the two together. This was a bit of a surprise for us as there are numerous excellent charting libraries already available. By far the most requested feature was Charting. Last year at our London and New York conferences, we asked attendees what they wanted to see in future versions of ag-Grid.
