Charts from table data in React

Charts from your table data, in React

Let users chart what they are looking at: pick a category and a value column, or right-click a column header, and a chart appears next to the grid. Filter the grid and the chart follows; click a bar and the grid follows the chart.

The chart panel is part of the Enterprise edition (@kanunilabs/datagrid-react-enterprise). You can use it in the live demo before buying.

Open the chart demo Charts guide

Built from the grid, not beside it

The chart reads the grid’s filtered rows and aggregates them through the same reducers as the footer totals, so the bars always add up to what the footer says. Sorting does not recompute it: aggregation does not depend on row order.

Six types, palettes, export

Column, bar, line, area, pie and donut; named colour palettes kept at 3:1 contrast against the chart background, including a colour-blind safe one; and PNG or SVG export of the chart.

Cross-filtering

With crossFilter on, clicking a category filters the grid to it; Ctrl or Cmd adds more categories. The chart and the grid stay one view of the same data.

The chart panel, docked open

<EnterpriseDataGrid
  licenseKey={key}
  dataSource={rows}
  rowKey="id"
  columns={columns}
  charting={{
    crossFilter: true,
    defaultOpen: true,
    defaultSpec: { categoryColumnId: 'region' },
    defaultFormat: { title: 'Sales by region', legend: 'right', dataLabels: true },
  }}
/>

Every option: Charts guide.

Questions

Do I need a charting library?
The React chart panel uses recharts as an optional peer dependency; install it next to the Enterprise package.
Can I put the chart somewhere else on the page?
Yes: dock it, float it as a window over the grid, or render it into an element of your own with the container option.
Does the pivot table chart too?
Yes — the PivotGrid’s Enterprise edition charts its own layout and keeps the chart in sync as fields move.

Related