Third Party Charting

This section goes through examples of integrating the grid with D3 (for charting outside of the grid) and Sparklines (for charting inside the grid).

In v21 of ag-Grid we introduced charting using the grid's own internal charting library. This page pre-dates the grid's internal charting library. It is our plan in the future to allow using the charting library to achieve the below, but for now we will leave the examples using D3 and Sparklines.

External Graphs using D3

D3 is a powerful Graphing Library. In this example we provide an example that displays a simple ag-Grid table of stock data that when clicked on provides a simple time-series chart of the corresponding data. Multiple rows (or stocks) can be selected to provide a comparison between stocks.

Inline Graphs using jQuery Sparklines

jQuery Sparklines is a great library that offers small but rich graphs - ideal for use within ag-Grid.

In this example we demonstrate the following:

  • Close Trend: Inline summary trend graph. If clicked on the full time-series will be displayed below.
  • Average Volume: The average volume per year in a Bar Graph.
  • Target Expenditure: Illustrates how a graph can be used withing a cell editor. If double clicked (or enter pressed) a popup editor in the form of a Pie Chart will be shown - when a segment is clicked on the value will be saved down to the grid.
  • Expenditure: Expenditure shown in a Pie Chart.