Charts integration 🧪

Use the MUI X Charts to visualize data from the Data Grid.

Data Grid seamlessly integrates with MUI X Charts for data visualization with dynamic Chart updates based on the Data Grid state changes (whether through the Data Grid API or user interactions).

This integration is possible via the <GridChartsIntegrationContextProvider /> and <GridChartsRendererProxy /> components from @mui/x-data-grid-premium and the <ChartRenderer /> component from the @mui/x-charts-premium package.

Based on its internal models, the Grid calculates and stores the data in a format that is easy to use for chart rendering. <ChartRenderer /> reads that data and renders an appropriate chart component with props that depend on the configuration stored in the context.

Implementing Charts and Data Grid integration

To enable chart integration, pass the chartsIntegration prop to the Grid and <GridChartsPanel /> to the chartsPanel slot. This enables the charts panel and makes it possible for the charts integration context provider state to receive updates.

import { DataGridPremium, GridChartsPanel } from '@mui/x-data-grid-premium';
// ...

return (
  <DataGridPremium
    chartsIntegration
    slots={{
      chartsPanel: GridChartsPanel,
      // ...other slots
    }}
    // ...other props
  />
);

Wrap your Grid and chart renderer in a <GridChartsIntegrationContextProvider />. Use <GridChartsRendererProxy /> to connect the chart renderer to the Grid's state updates.

import {
  DataGridPremium,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
} from '@mui/x-data-grid-premium';
import { ChartsRenderer } from '@mui/x-charts-premium/ChartsRenderer';
// ...

return (
  <GridChartsIntegrationContextProvider>
    <DataGridPremium
    // ...props
    />
    <GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
  </GridChartsIntegrationContextProvider>
);

Basic integration

The demo below shows all the basic elements needed to get the charts integration working. Use initialState to set the initial configuration for the chart renderer.

Row grouping

You can integrate charts with grouped and aggregated data. The Grid's grouping and aggregation states are reflected in the chart.

Pivoting

Pivoting creates columns dynamically, based on the pivoting model. The names of those columns are determined by the values used to generate them, which makes it impossible to initialize values with those values. Use the updateChartValuesData() to update the chart's value datasets after the columns are created.

const apiRef = useGridApiRef();

React.useEffect(() => {
  const handleColumnVisibilityModelChange = () => {
    // Get dynamically created columns
    const unwrappedGroupingModel = Object.keys(
      gridColumnGroupsUnwrappedModelSelector(apiRef),
    );
    // Update chart value datasets
    apiRef.current?.updateChartValuesData(
      'main',
      unwrappedGroupingModel
        .filter((field) => field.endsWith('quantity'))
        .slice(0, 5)
        .map((field, index) => ({ field, hidden: index >= 3 })),
    );
  };
  return apiRef.current?.subscribeEvent(
    'columnVisibilityModelChange',
    handleColumnVisibilityModelChange,
  );
}, [apiRef]);

Server-side data

The following demo shows charts integration with the grid using Server-side data.

Multiple charts

Control multiple charts with one grid by adding more <GridChartsRendererProxy /> components with unique IDs. Each chart can have its own configuration and state.

<GridChartsRendererProxy id="quantity" label="Quantity" renderer={ChartsRenderer} />
<GridChartsRendererProxy id="feeRate" label="Fee Rate" renderer={ChartsRenderer} />

Customization

Customize the chart configuration and rendering by:

• Overriding configuration options to force certain values. Use it to hide or lock configuration controls in the panel.
• Using the onRender() prop on <GridChartsRendererProxy /> to customize chart rendering for one or all chart types.

The demo below overrides the configuration and removes the option to change the color palette. Additionally, it adds axes formatting for line and area chart that cannot be controlled via the default customization panel.

If needed, you can extend the configuration to render the UI elements for the additional customized axes.

Live data

The demo below shows how the Charts react to live data updates in the Grid.

Localization

To localize all components included in the Charts integration, choose one method for both the Grid and Charts. We recommend using createTheme() and ThemeProvider.

To get localized configuration options, use getLocalizedConfigurationOptions() instead of configurationOptions.

The demo below shows how to incorporate localization into the integration using the frFr locale.

API

• DataGrid
• DataGridPro
• DataGridPremium