Series hooks

Get raw series data for custom components, by chart type or all at once.

The series hooks return raw series data for a given chart type. Use the hook that matches your chart (for example, useBarSeries() for bar charts, useLineSeries() for line charts).

Usage

import { useBarSeries, useLineSeries } from '@mui/x-charts/hooks';

function CustomComponent() {
  const barSeries = useBarSeries(); // Array of bar chart series data
  const lineSeries = useLineSeries(); // Array of line chart series data
}

You can get specific series by passing a series ID, or an array of series IDs.

const barSeries = useBarSeries('id1');

const barSeries = useBarSeries(['id1', 'id2']);

The series hooks for each chart type are:

• useBarSeries()
• useLineSeries()
• useScatterSeries()
• usePieSeries()
• useRadarSeries()
• useHeatmapSeries()
• useFunnelSeries()
• useSankeySeries()

The example below shows useBarSeries() returning bar chart series data:

Advanced usage

useSeries() returns all series data at once. The example below uses it to build a custom component that draws a line over each series max value.

Caveats

You can only use these hooks within a chart context. See the hooks overview for usage requirements.