useDataset

Read the dataset array used to populate series and axes in custom components.

The useDataset() hook returns the dataset array passed to the chart. This is useful when:

Creating custom components that need access to the raw data
Building data tables or summaries alongside your charts
Performing calculations on the full dataset

Usage

import { useDataset } from '@mui/x-charts/hooks';

function CustomComponent() {
  const dataset = useDataset();
  // Access the raw dataset array
}

useDataset() returns the dataset array passed to the chart's dataset prop, or undefined if no dataset was provided.

Basic example

The example below shows useDataset() used to display dataset statistics above a chart:

Total Revenue

$19,550

Total Expenses

$30,406

Net Profit

$-10,856

Data Points

7

Revenue
Expenses

Advanced example

The example below shows how to use the dataset to create a custom data table that stays in sync with the chart:

Quarterly Sales Report

Product	Q1	Q2	Q3	Q4	Total
Product A	$4,000	$3,000	$2,000	$2,780	$11,780
Product B	$3,000	$1,398	$9,800	$3,908	$18,106
Product C	$2,000	$9,800	$3,000	$4,800	$19,600
Product D	$2,780	$3,908	$4,000	$3,800	$14,488
Product E	$1,890	$4,800	$2,390	$3,800	$12,880
Total	$13,670	$22,906	$21,190	$19,088	$76,854

Return value

useDataset() returns:

Type	Description
`Readonly<DatasetType> \| undefined`	The dataset array passed to the chart, or `undefined` if no dataset was provided.

The DatasetType is an array of objects where each object represents a data point with various properties. For example:

const dataset = [
  { month: 'Jan', sales: 100, expenses: 80 },
  { month: 'Feb', sales: 150, expenses: 90 },
  { month: 'Mar', sales: 120, expenses: 70 },
];

Caveats

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