Angular Data Grid: Chart Toolbar

The chart toolbar allows users to unlink charts from the grid and download the current chart.

Unlinking Charts

Charts are linked to the data in the grid by default, so that if the data changes, the chart will also update. However, it is sometimes desirable to unlink a chart from the grid data. For instance, users may want to prevent a chart from being updated when subsequent sorts and filters are applied in the grid.

Unlinking a chart is achieved through the 'Unlink Chart' toolbar item highlighted below:

Notice that the chart range disappears from the grid when the chart has been unlinked. Subsequent changes to the grid sorting also do not impact the chart.

Downloading Charts

The 'Download Chart' toolbar item will download the chart as a PNG file. Note that the chart is drawn using Canvas in the browser and as such the user can also right click on the chart and save just like any other image on a web page.

The chart can also be downloaded using the Grid API.

Toolbar Customisation

The Chart Toolbar items can be omitted and ordered using the getChartToolbarItems() grid callback which can return which toolbar items should be shown and the order in which they appear:

<ag-grid-angular
    [getChartToolbarItems]="getChartToolbarItems"
    /* other grid options ... */>
</ag-grid-angular>

this.getChartToolbarItems = () => ['chartUnlink', 'chartDownload'];

The example below shows how the toolbar can be customised to only show the 'Download Chart' toolbar item.

// Loading...

Next Up

Continue to the next section to learn about the: Chart Container.