diff --git a/docs/data/charts/lines/InterpolationDemoNoSnap.js b/docs/data/charts/lines/InterpolationDemoNoSnap.js
index 4d7df7b365c81..4fa6a16c8d556 100644
--- a/docs/data/charts/lines/InterpolationDemoNoSnap.js
+++ b/docs/data/charts/lines/InterpolationDemoNoSnap.js
@@ -1,3 +1,5 @@
+// @ts-check
+
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
@@ -6,9 +8,12 @@ import { LineChart } from '@mui/x-charts/LineChart';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
+/**
+ * @type {import('@mui/x-charts/models').CurveType[]}
+ */
const curveTypes = [
- 'catmullRom',
'linear',
+ 'catmullRom',
'monotoneX',
'monotoneY',
'natural',
@@ -17,6 +22,9 @@ const curveTypes = [
'stepAfter',
];
+/**
+ * @param {import('@mui/x-charts/models').CurveType} curveType
+ */
function getExample(curveType) {
return ``;
}
+
export default function InterpolationDemoNoSnap() {
- const [curveType, setCurveType] = React.useState('linear');
+ const [curveType, setCurveType] = React.useState(curveTypes[0]);
return (
@@ -36,6 +45,7 @@ export default function InterpolationDemoNoSnap() {
label="interpolation method"
value={curveType}
sx={{ minWidth: 200, mb: 2 }}
+ // @ts-expect-error
onChange={(event) => setCurveType(event.target.value)}
>
{curveTypes.map((curve) => (
diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md
index e8d0d21dad17d..65d4ee9b52d30 100644
--- a/docs/data/charts/lines/lines.md
+++ b/docs/data/charts/lines/lines.md
@@ -168,7 +168,7 @@ For now, ordinal config is not supported for line chart.
### Interpolation
The interpolation between data points can be customized by the `curve` property.
-This property expects one of the following string values, corresponding to the interpolation method: `'catmullRom'`, `'linear'`, `'monotoneX'`, `'monotoneY'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`.
+This property expects one of the following string values, corresponding to the interpolation method: `'catmullRom'`, `'linear'`, `'monotoneX'`, `'monotoneY'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`, `'bumpX'` and `'bumpY'`.
This series property adds the option to control the interpolation of a series.
Different series could even have different interpolations.
diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json
index f89a6742ab279..28bfe8def78d9 100644
--- a/docs/pages/x/api/charts/charts-tooltip.json
+++ b/docs/pages/x/api/charts/charts-tooltip.json
@@ -79,6 +79,14 @@
"import { ChartsTooltip } from '@mui/x-charts';",
"import { ChartsTooltip } from '@mui/x-charts-pro';"
],
+ "slots": [
+ {
+ "name": "tooltip",
+ "description": "Custom component for the tooltip popper.",
+ "default": "ChartsTooltipRoot",
+ "class": null
+ }
+ ],
"classes": [
{
"key": "axisValueCell",
diff --git a/docs/translations/api-docs/charts/bar-series-type.json b/docs/translations/api-docs/charts/bar-series-type.json
index d84b4ba782c5a..85d4b7bb80767 100644
--- a/docs/translations/api-docs/charts/bar-series-type.json
+++ b/docs/translations/api-docs/charts/bar-series-type.json
@@ -11,7 +11,7 @@
"description": "The label to display on the tooltip or the legend. It can be a string or a function."
},
"labelMarkType": {
- "description": "Defines the mark type for the series.
There is a default mark type for each series type.
It allows custom values which will be passed to the mark component if it was customized."
+ "description": "Defines the mark type for the series.
There is a default mark type for each series type."
},
"layout": { "description": "Layout of the bars. All bar should have the same layout." },
"stack": {
diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
index 4f1aba6c8bbe0..15fde34e93ec8 100644
--- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
+++ b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
@@ -67,5 +67,6 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the valueCell element"
}
- }
+ },
+ "slotDescriptions": { "tooltip": "Custom component for the tooltip popper." }
}
diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json
index ec4c420030425..69dee736f27b4 100644
--- a/docs/translations/api-docs/charts/line-series-type.json
+++ b/docs/translations/api-docs/charts/line-series-type.json
@@ -24,7 +24,7 @@
"description": "The label to display on the tooltip or the legend. It can be a string or a function."
},
"labelMarkType": {
- "description": "Defines the mark type for the series.
There is a default mark type for each series type.
It allows custom values which will be passed to the mark component if it was customized."
+ "description": "Defines the mark type for the series.
There is a default mark type for each series type."
},
"shape": {
"description": "The shape of the mark elements.
Using 'circle' renders a <circle />
element, while all other options render a <path />
instead. The path causes a small decrease in performance."
diff --git a/docs/translations/api-docs/charts/pie-series-type.json b/docs/translations/api-docs/charts/pie-series-type.json
index 6624fb549e8de..dd4beb0e9d038 100644
--- a/docs/translations/api-docs/charts/pie-series-type.json
+++ b/docs/translations/api-docs/charts/pie-series-type.json
@@ -27,7 +27,7 @@
"description": "The radius between circle center and the beginning of the arc.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area."
},
"labelMarkType": {
- "description": "Defines the mark type for the series.
There is a default mark type for each series type.
It allows custom values which will be passed to the mark component if it was customized."
+ "description": "Defines the mark type for the series.
There is a default mark type for each series type."
},
"outerRadius": {
"description": "The radius between circle center and the end of the arc.
Can be a number (in px) or a string with a percentage such as '50%'.
The '100%' is the maximal radius that fit into the drawing area."
diff --git a/docs/translations/api-docs/charts/scatter-series-type.json b/docs/translations/api-docs/charts/scatter-series-type.json
index 8a20f810ad506..457a1e475c103 100644
--- a/docs/translations/api-docs/charts/scatter-series-type.json
+++ b/docs/translations/api-docs/charts/scatter-series-type.json
@@ -16,7 +16,7 @@
"description": "The label to display on the tooltip or the legend. It can be a string or a function."
},
"labelMarkType": {
- "description": "Defines the mark type for the series.
There is a default mark type for each series type.
It allows custom values which will be passed to the mark component if it was customized."
+ "description": "Defines the mark type for the series.
There is a default mark type for each series type."
},
"markerSize": { "description": "" },
"valueFormatter": {
diff --git a/packages/x-charts-pro/src/hooks/useSeries.ts b/packages/x-charts-pro/src/hooks/useSeries.ts
index 4a997f4101119..6a150b390d983 100644
--- a/packages/x-charts-pro/src/hooks/useSeries.ts
+++ b/packages/x-charts-pro/src/hooks/useSeries.ts
@@ -1,6 +1,6 @@
'use client';
import * as React from 'react';
-import { useSeries } from '@mui/x-charts/internals';
+import { useSeries, ProcessedSeries } from '@mui/x-charts/internals';
/**
* Get access to the internal state of heatmap series.
@@ -9,7 +9,7 @@ import { useSeries } from '@mui/x-charts/internals';
* - seriesOrder: the array of series ids.
* @returns { series: Record; seriesOrder: SeriesId[]; } | undefined heatmapSeries
*/
-export function useHeatmapSeries() {
+export function useHeatmapSeries(): ProcessedSeries['heatmap'] {
const series = useSeries();
return React.useMemo(() => series.heatmap, [series.heatmap]);
diff --git a/packages/x-charts/src/ChartsTooltip/index.ts b/packages/x-charts/src/ChartsTooltip/index.ts
index 5ab32ee5621e4..55b073c05ff74 100644
--- a/packages/x-charts/src/ChartsTooltip/index.ts
+++ b/packages/x-charts/src/ChartsTooltip/index.ts
@@ -11,3 +11,4 @@ export * from './ChartsTooltipTable';
export * from './useItemTooltip';
export * from './useAxisTooltip';
export { useMouseTracker } from './utils';
+export * from './ChartTooltip.types';
diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx
index ea2101ed33977..ad7eea30bf346 100644
--- a/packages/x-charts/src/LineChart/AreaPlot.tsx
+++ b/packages/x-charts/src/LineChart/AreaPlot.tsx
@@ -11,7 +11,7 @@ import {
AreaElementSlots,
} from './AreaElement';
import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
+import { getCurveFactory } from '../internals/getCurve';
import { isBandScale } from '../internals/isBandScale';
import { DEFAULT_X_AXIS_KEY } from '../constants';
import { LineItemIdentifier } from '../models/seriesType/line';
diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx
index 8f02667ac176e..e9c588a6e03ac 100644
--- a/packages/x-charts/src/LineChart/LinePlot.tsx
+++ b/packages/x-charts/src/LineChart/LinePlot.tsx
@@ -11,7 +11,7 @@ import {
LineElementSlots,
} from './LineElement';
import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
+import { getCurveFactory } from '../internals/getCurve';
import { isBandScale } from '../internals/isBandScale';
import { DEFAULT_X_AXIS_KEY } from '../constants';
import { LineItemIdentifier } from '../models/seriesType/line';
diff --git a/packages/x-charts/src/PieChart/legend.ts b/packages/x-charts/src/PieChart/legend.ts
index ac986d5593e4c..988d91509d482 100644
--- a/packages/x-charts/src/PieChart/legend.ts
+++ b/packages/x-charts/src/PieChart/legend.ts
@@ -13,7 +13,7 @@ const legendGetter: LegendGetter<'pie'> = (params) => {
}
acc.push({
- markType: series[seriesId].labelMarkType,
+ markType: item.labelMarkType ?? series[seriesId].labelMarkType,
id: item.id,
seriesId,
color: item.color,
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 84cd7abbf773a..9002fba05a45a 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -246,6 +246,8 @@ SparkLineChart.propTypes = {
* @default 'linear'
*/
curve: PropTypes.oneOf([
+ 'bumpX',
+ 'bumpY',
'catmullRom',
'linear',
'monotoneX',
diff --git a/packages/x-charts/src/internals/getCurve.ts b/packages/x-charts/src/internals/getCurve.ts
index 73691782fb75d..1de4e5fecfef8 100644
--- a/packages/x-charts/src/internals/getCurve.ts
+++ b/packages/x-charts/src/internals/getCurve.ts
@@ -7,35 +7,33 @@ import {
curveStep,
curveStepAfter,
curveStepBefore,
+ curveBumpX,
+ curveBumpY,
} from '@mui/x-charts-vendor/d3-shape';
-import { CurveType } from '../models/seriesType/line';
+import { CurveType } from '../models/curve';
-export default function getCurveFactory(curveType?: CurveType) {
+export function getCurveFactory(curveType?: CurveType) {
switch (curveType) {
- case 'catmullRom': {
+ case 'catmullRom':
return curveCatmullRom.alpha(0.5);
- }
- case 'linear': {
+ case 'linear':
return curveLinear;
- }
- case 'monotoneX': {
+ case 'monotoneX':
return curveMonotoneX;
- }
- case 'monotoneY': {
+ case 'monotoneY':
return curveMonotoneY;
- }
- case 'natural': {
+ case 'natural':
return curveNatural;
- }
- case 'step': {
+ case 'step':
return curveStep;
- }
- case 'stepBefore': {
+ case 'stepBefore':
return curveStepBefore;
- }
- case 'stepAfter': {
+ case 'stepAfter':
return curveStepAfter;
- }
+ case 'bumpY':
+ return curveBumpY;
+ case 'bumpX':
+ return curveBumpX;
default:
return curveMonotoneX;
}
diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts
index bd70fa0195249..34b8af02398ae 100644
--- a/packages/x-charts/src/internals/index.ts
+++ b/packages/x-charts/src/internals/index.ts
@@ -34,6 +34,7 @@ export * from './getSVGPoint';
export * from './isDefined';
export { unstable_cleanupDOM } from './domUtils';
export * from './getScale';
+export * from './getCurve';
// contexts
diff --git a/packages/x-charts/src/models/curve.ts b/packages/x-charts/src/models/curve.ts
new file mode 100644
index 0000000000000..2f23da3eb0583
--- /dev/null
+++ b/packages/x-charts/src/models/curve.ts
@@ -0,0 +1,16 @@
+/**
+ * The type of curve to use for the line.
+ * Read more about curves at
+ * [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+ */
+export type CurveType =
+ | 'catmullRom'
+ | 'linear'
+ | 'monotoneX'
+ | 'monotoneY'
+ | 'natural'
+ | 'step'
+ | 'stepBefore'
+ | 'stepAfter'
+ | 'bumpY'
+ | 'bumpX';
diff --git a/packages/x-charts/src/models/index.ts b/packages/x-charts/src/models/index.ts
index 1b370c0ec5fe6..b439fae7ccdab 100644
--- a/packages/x-charts/src/models/index.ts
+++ b/packages/x-charts/src/models/index.ts
@@ -11,3 +11,4 @@ export type {
// Utils shared across the X packages
export type { PropsFromSlot } from '@mui/x-internals/slots';
+export type { CurveType } from './curve';
diff --git a/packages/x-charts/src/models/seriesType/common.ts b/packages/x-charts/src/models/seriesType/common.ts
index 084d3d302dd1a..897cb0746a30a 100644
--- a/packages/x-charts/src/models/seriesType/common.ts
+++ b/packages/x-charts/src/models/seriesType/common.ts
@@ -34,8 +34,6 @@ export type CommonSeriesType = {
* Defines the mark type for the series.
*
* There is a default mark type for each series type.
- *
- * It allows custom values which will be passed to the mark component if it was customized.
*/
labelMarkType?: ChartsLabelMarkProps['type'];
};
diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts
index e38902b34bb13..b594ba9841006 100644
--- a/packages/x-charts/src/models/seriesType/line.ts
+++ b/packages/x-charts/src/models/seriesType/line.ts
@@ -7,16 +7,7 @@ import {
SeriesId,
StackableSeriesType,
} from './common';
-
-export type CurveType =
- | 'catmullRom'
- | 'linear'
- | 'monotoneX'
- | 'monotoneY'
- | 'natural'
- | 'step'
- | 'stepBefore'
- | 'stepAfter';
+import { CurveType } from '../curve';
export interface ShowMarkParams {
/**
diff --git a/packages/x-charts/src/models/seriesType/pie.ts b/packages/x-charts/src/models/seriesType/pie.ts
index 50d2447ec0cfc..7c16a61dd6c04 100644
--- a/packages/x-charts/src/models/seriesType/pie.ts
+++ b/packages/x-charts/src/models/seriesType/pie.ts
@@ -18,9 +18,6 @@ export type PieValueType = {
color?: string;
/**
* Defines the mark type for the pie item.
- *
- * It allows custom values which will be passed to the mark component if it was customized.
- *
* @default 'circle'
*/
labelMarkType?: ChartsLabelMarkProps['type'];
diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json
index aac2c5de4e893..b361cd31f6af8 100644
--- a/scripts/x-charts-pro.exports.json
+++ b/scripts/x-charts-pro.exports.json
@@ -117,6 +117,8 @@
{ "name": "ChartsTooltipPaper", "kind": "Variable" },
{ "name": "ChartsTooltipProps", "kind": "Interface" },
{ "name": "ChartsTooltipRow", "kind": "Variable" },
+ { "name": "ChartsTooltipSlotProps", "kind": "Interface" },
+ { "name": "ChartsTooltipSlots", "kind": "Interface" },
{ "name": "ChartsTooltipTable", "kind": "Variable" },
{ "name": "ChartsVoronoiHandler", "kind": "Function" },
{ "name": "ChartsVoronoiHandlerProps", "kind": "TypeAlias" },
diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
index 30849fd95a457..8f1e0b757f51e 100644
--- a/scripts/x-charts.exports.json
+++ b/scripts/x-charts.exports.json
@@ -113,6 +113,8 @@
{ "name": "ChartsTooltipPaper", "kind": "Variable" },
{ "name": "ChartsTooltipProps", "kind": "Interface" },
{ "name": "ChartsTooltipRow", "kind": "Variable" },
+ { "name": "ChartsTooltipSlotProps", "kind": "Interface" },
+ { "name": "ChartsTooltipSlots", "kind": "Interface" },
{ "name": "ChartsTooltipTable", "kind": "Variable" },
{ "name": "ChartsVoronoiHandler", "kind": "Function" },
{ "name": "ChartsVoronoiHandlerProps", "kind": "TypeAlias" },