Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: 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).

This section pre-dates Integrated Charts. It is our plan to add support to our charting library to achieve the below, but for now we will leave these 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 within 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.