diff --git a/docs/pages/x/api/charts/line-series-type.json b/docs/pages/x/api/charts/line-series-type.json
index 61608bfce9c6..147f90302c1d 100644
--- a/docs/pages/x/api/charts/line-series-type.json
+++ b/docs/pages/x/api/charts/line-series-type.json
@@ -7,7 +7,7 @@
"baseline": { "type": { "description": "number | 'min' | 'max'" }, "default": "0" },
"color": { "type": { "description": "string" } },
"connectNulls": { "type": { "description": "boolean" }, "default": "false" },
- "curve": { "type": { "description": "CurveType" } },
+ "curve": { "type": { "description": "CurveType" }, "default": "'monotoneX'" },
"data": { "type": { "description": "(number | null)[]" } },
"dataKey": { "type": { "description": "string" } },
"disableHighlight": { "type": { "description": "boolean" }, "default": "false" },
diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json
index 824efbcd4acb..c7c871a6b8e8 100644
--- a/docs/translations/api-docs/charts/line-series-type.json
+++ b/docs/translations/api-docs/charts/line-series-type.json
@@ -10,7 +10,9 @@
"connectNulls": {
"description": "If true
, line and area connect points separated by null
values."
},
- "curve": { "description": "" },
+ "curve": {
+ "description": "The type of curve to use for the line.
Read more about curves at line interpolation."
+ },
"data": { "description": "Data associated to the line." },
"dataKey": { "description": "The key used to retrieve data from the dataset." },
"disableHighlight": {
diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts
index 35d2cb3ae7e3..d2c5639f7973 100644
--- a/packages/x-charts/src/BarChart/formatter.ts
+++ b/packages/x-charts/src/BarChart/formatter.ts
@@ -1,4 +1,5 @@
import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
import { getStackingGroups } from '../internals/stackSeries';
import { ChartSeries, DatasetElementType, DatasetType } from '../models/seriesType/config';
import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
@@ -6,8 +7,6 @@ import { DefaultizedProps } from '../models/helpers';
import { SeriesId } from '../models/seriesType/common';
import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
-let warnOnce = false;
-
type BarDataset = DatasetType;
const formatter: SeriesFormatter<'bar'> = (params, dataset) => {
@@ -63,14 +62,13 @@ const formatter: SeriesFormatter<'bar'> = (params, dataset) => {
? dataset!.map((data) => {
const value = data[dataKey];
if (typeof value !== 'number') {
- if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
- warnOnce = true;
- console.error(
- [
- `MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`,
+ if (process.env.NODE_ENV !== 'production') {
+ if (value !== null) {
+ warnOnce([
+ `MUI X: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`,
'Bar plots only support numbers and null values.',
- ].join('\n'),
- );
+ ]);
+ }
}
return 0;
}
diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts
index bf5261999f63..ec0ec804abb5 100644
--- a/packages/x-charts/src/LineChart/formatter.ts
+++ b/packages/x-charts/src/LineChart/formatter.ts
@@ -1,4 +1,5 @@
import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
+import { warnOnce } from '@mui/x-internals/warning';
import { getStackingGroups } from '../internals/stackSeries';
import { ChartSeries, DatasetElementType, DatasetType } from '../models/seriesType/config';
import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
@@ -6,8 +7,6 @@ import { DefaultizedProps } from '../models/helpers';
import { SeriesId } from '../models/seriesType/common';
import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
-let warnedOnce = false;
-
// For now it's a copy past of bar charts formatter, but maybe will diverge later
const formatter: SeriesFormatter<'line'> = (params, dataset) => {
const { seriesOrder, series } = params;
@@ -60,12 +59,13 @@ const formatter: SeriesFormatter<'line'> = (params, dataset) => {
? dataset!.map((data) => {
const value = data[dataKey];
if (typeof value !== 'number') {
- if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
- warnedOnce = true;
- console.error([
- `MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`,
- 'Line plots only support numbers and null values.',
- ]);
+ if (process.env.NODE_ENV !== 'production') {
+ if (value !== null) {
+ warnOnce([
+ `MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`,
+ 'Line plots only support numbers and null values.',
+ ]);
+ }
}
return null;
}
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 455b8eda8526..6e600868512e 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -17,7 +17,7 @@ import {
import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
import { MakeOptional } from '../models/helpers';
-import { LineSeriesType } from '../models/seriesType/line';
+import { LineSeriesType, BarSeriesType } from '../models/seriesType';
import { CardinalDirections } from '../models/layout';
import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot';
import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
@@ -177,7 +177,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
data,
valueFormatter,
...(plotType === 'bar' ? {} : { area, curve, disableHighlight: !showHighlight }),
- },
+ } as LineSeriesType | BarSeriesType,
]}
width={width}
height={height}
diff --git a/packages/x-charts/src/hooks/useSeries.ts b/packages/x-charts/src/hooks/useSeries.ts
index 727a94300fcf..4f68bfa6ef1e 100644
--- a/packages/x-charts/src/hooks/useSeries.ts
+++ b/packages/x-charts/src/hooks/useSeries.ts
@@ -28,7 +28,7 @@ export function useSeries(): FormattedSeries {
* The returned object contains:
* - series: a mapping from ids to series attributes.
* - seriesOrder: the array of series ids.
- * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined pieSeries
+ * @returns {{ series: Record; seriesOrder: SeriesId[]; } | undefined} pieSeries
*/
export function usePieSeries(): FormattedSeries['pie'] {
const series = useSeries();
@@ -41,7 +41,7 @@ export function usePieSeries(): FormattedSeries['pie'] {
* The returned object contains:
* - series: a mapping from ids to series attributes.
* - seriesOrder: the array of series ids.
- * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined lineSeries
+ * @returns {{ series: Record; seriesOrder: SeriesId[]; } | undefined} lineSeries
*/
export function useLineSeries(): FormattedSeries['line'] {
const series = useSeries();
@@ -54,7 +54,7 @@ export function useLineSeries(): FormattedSeries['line'] {
* The returned object contains:
* - series: a mapping from ids to series attributes.
* - seriesOrder: the array of series ids.
- * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined barSeries
+ * @returns {{ series: Record; seriesOrder: SeriesId[]; } | undefined} barSeries
*/
export function useBarSeries(): FormattedSeries['bar'] {
const series = useSeries();
@@ -67,7 +67,7 @@ export function useBarSeries(): FormattedSeries['bar'] {
* The returned object contains:
* - series: a mapping from ids to series attributes.
* - seriesOrder: the array of series ids.
- * @returns { series: Record; seriesOrder: SeriesId[]; } | undefined scatterSeries
+ * @returns {{ series: Record; seriesOrder: SeriesId[]; } | undefined} scatterSeries
*/
export function useScatterSeries(): FormattedSeries['scatter'] {
const series = useSeries();
diff --git a/packages/x-charts/src/internals/geometry.ts b/packages/x-charts/src/internals/geometry.ts
index 43fd024cacc3..5bef1a35eec1 100644
--- a/packages/x-charts/src/internals/geometry.ts
+++ b/packages/x-charts/src/internals/geometry.ts
@@ -1,6 +1,6 @@
-const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
+import { warnOnce } from '@mui/x-internals/warning';
-let warnedOnce = false;
+const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
/**
* Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
@@ -12,15 +12,12 @@ let warnedOnce = false;
*/
export function getMinXTranslation(width: number, height: number, angle: number = 0) {
if (process.env.NODE_ENV !== 'production') {
- if (!warnedOnce && angle > 90 && angle < -90) {
- warnedOnce = true;
- console.warn(
- [
- `MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`,
- `This could cause some text overlapping.`,
- `If you encounter a use case where it's needed, please open an issue.`,
- ].join('\n'),
- );
+ if (angle > 90 && angle < -90) {
+ warnOnce([
+ `MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`,
+ `This could cause some text overlapping.`,
+ `If you encounter a use case where it's needed, please open an issue.`,
+ ]);
}
}
const standardAngle = Math.min(
diff --git a/packages/x-charts/src/models/seriesType/line.ts b/packages/x-charts/src/models/seriesType/line.ts
index 744749d66833..f27c6f4eec49 100644
--- a/packages/x-charts/src/models/seriesType/line.ts
+++ b/packages/x-charts/src/models/seriesType/line.ts
@@ -60,6 +60,11 @@ export interface LineSeriesType
* The label to display on the tooltip or the legend. It can be a string or a function.
*/
label?: string | ((location: 'tooltip' | 'legend') => string);
+ /**
+ * The type of curve to use for the line.
+ * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+ * @default 'monotoneX'
+ */
curve?: CurveType;
/**
* Define which items of the series should display a mark.