diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index 188c91bdd01b..6aefc4f003a2 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -67,7 +67,7 @@ The scatter charts use by priority:
:::info
The z-axis is a third axis that allows to customize scatter points independently from their position.
-It can be provided with `zAxis` props, or with `ZAxisContextProvider` when using composition.
+It can be provided with `zAxis` props.
The value to map can either come from the `z` property of series data, or from the zAxis data.
Here are three ways to set z value to 5.
diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json
index bd978a54494a..b92a05628f0d 100644
--- a/docs/pages/x/api/charts/chart-container.json
+++ b/docs/pages/x/api/charts/chart-container.json
@@ -44,6 +44,12 @@
"name": "arrayOf",
"description": "Array<{ axisId?: number
| string, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>"
}
+ },
+ "zAxis": {
+ "type": {
+ "name": "arrayOf",
+ "description": "Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string }>"
+ }
}
},
"name": "ChartContainer",
diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json
index cc76f819d027..f758a3c363d9 100644
--- a/docs/pages/x/api/charts/responsive-chart-container.json
+++ b/docs/pages/x/api/charts/responsive-chart-container.json
@@ -44,6 +44,12 @@
"name": "arrayOf",
"description": "Array<{ axisId?: number
| string, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>"
}
+ },
+ "zAxis": {
+ "type": {
+ "name": "arrayOf",
+ "description": "Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string }>"
+ }
}
},
"name": "ResponsiveChartContainer",
diff --git a/docs/translations/api-docs/charts/chart-container/chart-container.json b/docs/translations/api-docs/charts/chart-container/chart-container.json
index 625af15ee031..5a13d2067ae7 100644
--- a/docs/translations/api-docs/charts/chart-container/chart-container.json
+++ b/docs/translations/api-docs/charts/chart-container/chart-container.json
@@ -31,7 +31,8 @@
},
"yAxis": {
"description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects."
- }
+ },
+ "zAxis": { "description": "The configuration of the z-axes." }
},
"classDescriptions": {}
}
diff --git a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json
index 812a9391959a..1623c12c44cd 100644
--- a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json
+++ b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json
@@ -35,7 +35,8 @@
},
"yAxis": {
"description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects."
- }
+ },
+ "zAxis": { "description": "The configuration of the z-axes." }
},
"classDescriptions": {}
}
diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index d35db5a296e1..b36d1fdaac1a 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -51,7 +51,7 @@ export interface BarChartSlotProps
ChartsOverlaySlotProps {}
export interface BarChartProps
- extends Omit,
+ extends Omit,
Omit,
Omit,
Omit,
diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
index 31770a088e55..7ebdd67c0e32 100644
--- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx
+++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -15,7 +15,12 @@ import {
CartesianContextProviderProps,
} from '../context/CartesianContextProvider';
import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { HighlightedProvider, HighlightedProviderProps } from '../context';
+import {
+ HighlightedProvider,
+ HighlightedProviderProps,
+ ZAxisContextProvider,
+ ZAxisContextProviderProps,
+} from '../context';
import { ChartsPluginType } from '../models/plugin';
import { ChartSeriesType } from '../models/seriesType/config';
import { usePluginsMerge } from './usePluginsMerge';
@@ -25,6 +30,7 @@ export type ChartContainerProps = Omit<
Omit &
Omit &
Omit &
+ ZAxisContextProviderProps &
HighlightedProviderProps,
'children'
> & {
@@ -44,6 +50,7 @@ const ChartContainer = React.forwardRef(function ChartContainer(props: ChartCont
margin,
xAxis,
yAxis,
+ zAxis,
colors,
dataset,
sx,
@@ -78,25 +85,27 @@ const ChartContainer = React.forwardRef(function ChartContainer(props: ChartCont
xExtremumGetters={xExtremumGetters}
yExtremumGetters={yExtremumGetters}
>
-
-
-
+
+
-
- {children}
-
-
-
+
+
+ {children}
+
+
+
+
@@ -325,6 +334,43 @@ ChartContainer.propTypes = {
valueFormatter: PropTypes.func,
}),
),
+ /**
+ * The configuration of the z-axes.
+ */
+ zAxis: PropTypes.arrayOf(
+ PropTypes.shape({
+ colorMap: PropTypes.oneOfType([
+ PropTypes.shape({
+ colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+ type: PropTypes.oneOf(['ordinal']).isRequired,
+ unknownColor: PropTypes.string,
+ values: PropTypes.arrayOf(
+ PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
+ .isRequired,
+ ),
+ }),
+ PropTypes.shape({
+ color: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.string.isRequired),
+ PropTypes.func,
+ ]).isRequired,
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+ type: PropTypes.oneOf(['continuous']).isRequired,
+ }),
+ PropTypes.shape({
+ colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+ thresholds: PropTypes.arrayOf(
+ PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired,
+ ).isRequired,
+ type: PropTypes.oneOf(['piecewise']).isRequired,
+ }),
+ ]),
+ data: PropTypes.array,
+ dataKey: PropTypes.string,
+ id: PropTypes.string,
+ }),
+ ),
} as any;
export { ChartContainer };
diff --git a/packages/x-charts/src/ChartsOverlay/index.ts b/packages/x-charts/src/ChartsOverlay/index.ts
index 200c86e4c607..0ca99b20ab32 100644
--- a/packages/x-charts/src/ChartsOverlay/index.ts
+++ b/packages/x-charts/src/ChartsOverlay/index.ts
@@ -1,3 +1,8 @@
export { ChartsOverlay } from './ChartsOverlay';
+export type {
+ ChartsOverlayProps,
+ ChartsOverlaySlotProps,
+ ChartsOverlaySlots,
+} from './ChartsOverlay';
export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
index 08f59b0ec6f2..262bb3688029 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
@@ -8,9 +8,9 @@ import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/co
import { AxisDefaultized } from '../models/axis';
import { ChartsTooltipClasses } from './chartsTooltipClasses';
import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { isCartesianSeriesType } from '../internals/isCartesian';
-import { useColorProcessor } from '../hooks/useColor';
import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useColorProcessor } from '../hooks/useColor';
+import { isCartesianSeriesType } from '../internals/isCartesian';
import { useSeries } from '../hooks/useSeries';
type ChartSeriesDefaultizedWithColorGetter = ChartSeriesDefaultized & {
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index 98a15f16debd..33015b56d69e 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -42,7 +42,7 @@ import {
ChartsOverlayProps,
ChartsOverlaySlotProps,
ChartsOverlaySlots,
-} from '../ChartsOverlay/ChartsOverlay';
+} from '../ChartsOverlay';
export interface LineChartSlots
extends ChartsAxisSlots,
@@ -64,7 +64,7 @@ export interface LineChartSlotProps
ChartsOverlaySlotProps {}
export interface LineChartProps
- extends Omit,
+ extends Omit,
Omit,
Omit,
ChartsOnAxisClickHandlerProps {
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index 9c3e1b776972..bf00ee9effaa 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -35,7 +35,7 @@ import {
ChartsOverlayProps,
ChartsOverlaySlotProps,
ChartsOverlaySlots,
-} from '../ChartsOverlay/ChartsOverlay';
+} from '../ChartsOverlay';
export interface PieChartSlots
extends ChartsAxisSlots,
@@ -52,7 +52,10 @@ export interface PieChartSlotProps
ChartsOverlaySlotProps {}
export interface PieChartProps
- extends Omit,
+ extends Omit<
+ ResponsiveChartContainerProps,
+ 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'
+ >,
Omit,
Omit,
Pick {
diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
index 52616f191ce2..d33fbcf1590e 100644
--- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
+++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx
@@ -253,6 +253,43 @@ ResponsiveChartContainer.propTypes = {
valueFormatter: PropTypes.func,
}),
),
+ /**
+ * The configuration of the z-axes.
+ */
+ zAxis: PropTypes.arrayOf(
+ PropTypes.shape({
+ colorMap: PropTypes.oneOfType([
+ PropTypes.shape({
+ colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+ type: PropTypes.oneOf(['ordinal']).isRequired,
+ unknownColor: PropTypes.string,
+ values: PropTypes.arrayOf(
+ PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
+ .isRequired,
+ ),
+ }),
+ PropTypes.shape({
+ color: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.string.isRequired),
+ PropTypes.func,
+ ]).isRequired,
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+ type: PropTypes.oneOf(['continuous']).isRequired,
+ }),
+ PropTypes.shape({
+ colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+ thresholds: PropTypes.arrayOf(
+ PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired,
+ ).isRequired,
+ type: PropTypes.oneOf(['piecewise']).isRequired,
+ }),
+ ]),
+ data: PropTypes.array,
+ dataKey: PropTypes.string,
+ id: PropTypes.string,
+ }),
+ ),
} as any;
export { ResponsiveChartContainer };
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index 3548f83c9977..7afb59255eb3 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -30,7 +30,7 @@ import {
ChartsOverlayProps,
ChartsOverlaySlotProps,
ChartsOverlaySlots,
-} from '../ChartsOverlay/ChartsOverlay';
+} from '../ChartsOverlay';
import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
import {
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 0456631bd7e5..028db19f4acf 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -40,7 +40,10 @@ export interface SparkLineChartSlotProps
ChartsTooltipSlotProps {}
export interface SparkLineChartProps
- extends Omit {
+ extends Omit<
+ ResponsiveChartContainerProps,
+ 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'
+ > {
/**
* The xAxis configuration.
* Notice it is a single [[AxisConfig]] object, not an array of configuration.