@mui/x-charts 8.0.0-alpha.13 → 8.0.0-alpha.14

package/esm/hooks/useRadarSeries.d.ts

@@ -0,0 +1,35 @@
+import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import { SeriesId } from "../models/seriesType/common.js";
+import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+export type UseRadarSeriesReturnValue = ChartSeriesDefaultized<'radar'>;
+export type UseRadarSeriesContextReturnValue = ProcessedSeries['radar'];
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId} seriesId The id of the series to get.
+ * @returns {UseRadarSeriesReturnValue} the radar series
+ */
+export declare function useRadarSeries(seriesId: SeriesId): UseRadarSeriesReturnValue | undefined;
+/**
+ * Get access to the internal state of radar series.
+ *
+ * When called without arguments, it returns all radar series.
+ *
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+export declare function useRadarSeries(): UseRadarSeriesReturnValue[];
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+export declare function useRadarSeries(seriesIds?: SeriesId[]): UseRadarSeriesReturnValue[];
+/**
+ * Get access to the internal state of radar series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns the radar series
+ */
+export declare function useRadarSeriesContext(): UseRadarSeriesContextReturnValue;

package/esm/hooks/useRadarSeries.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { createSeriesSelectorsOfType, createAllSeriesSelectorOfType } from "../internals/createSeriesSelectorOfType.js";
+const useSelectorSeries = createSeriesSelectorsOfType('radar');
+const useSelectorSeriesContext = createAllSeriesSelectorOfType('radar');
+
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId} seriesId The id of the series to get.
+ * @returns {UseRadarSeriesReturnValue} the radar series
+ */
+
+/**
+ * Get access to the internal state of radar series.
+ *
+ * When called without arguments, it returns all radar series.
+ *
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+
+/**
+ * Get access to the internal state of radar series.
+ *
+ * @param {SeriesId[]} seriesIds The ids of the series to get. Order is preserved.
+ * @returns {UseRadarSeriesReturnValue[]} the radar series
+ */
+
+export function useRadarSeries(seriesIds) {
+  return useSelectorSeries(seriesIds);
+}
+
+/**
+ * Get access to the internal state of radar series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns the radar series
+ */
+export function useRadarSeriesContext() {
+  return useSelectorSeriesContext();
+}

package/esm/hooks/useScale.d.ts

@@ -19,4 +19,6 @@ export declare function useXScale<S extends ScaleName>(axisId?: AxisId): AxisSca
  * @param {AxisId | undefined} axisId - If provided returns the scale for the y axis with axisId, else returns the values for the default y axis.
  * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
  */
-export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
+export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
+export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
+export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];

package/esm/hooks/useScale.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { isBandScale } from "../internals/isBandScale.js";
-import { useXAxis, useYAxis } from "./useAxis.js";
+import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js";
 
 /**
  * For a given scale return a function that map value to their position.
@@ -36,4 +36,12 @@ export function useXScale(axisId) {
 export function useYScale(axisId) {
   const axis = useYAxis(axisId);
   return axis.scale;
+}
+export function useRotationScale(identifier) {
+  const axis = useRotationAxis(identifier);
+  return axis.scale;
+}
+export function useRadiusScale(identifier) {
+  const axis = useRadiusAxis(identifier);
+  return axis.scale;
 }

package/esm/hooks/useTicks.js

@@ -29,12 +29,13 @@ export function useTicks(options) {
     valueFormatter,
     tickInterval,
     tickPlacement = 'extremities',
-    tickLabelPlacement = 'middle'
+    tickLabelPlacement: tickLabelPlacementProp
   } = options;
   return React.useMemo(() => {
     // band scale
     if (isBandScale(scale)) {
       const domain = scale.domain();
+      const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
         const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
@@ -71,15 +72,20 @@ export function useTicks(options) {
     if (domain.some(isInfinity)) {
       return [];
     }
+    const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map(value => ({
-      value,
-      formattedValue: valueFormatter?.(value, {
-        location: 'tick',
-        scale
-      }) ?? scale.tickFormat(tickNumber)(value),
-      offset: scale(value),
-      labelOffset: 0
-    }));
-  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacement]);
+    return ticks.map((value, i) => {
+      return {
+        value,
+        formattedValue: valueFormatter?.(value, {
+          location: 'tick',
+          scale
+        }) ?? scale.tickFormat(tickNumber)(value),
+        offset: scale(value),
+        // Allowing the label to be placed in the middle of a continuous scale is weird.
+        // But it is useful in some cases, like funnel categories with a linear scale.
+        labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (scale(value) + scale(ticks[i - 1] ?? 0)) / 2 : 0
+      };
+    });
+  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacementProp]);
 }

package/esm/index.d.ts

@@ -20,6 +20,7 @@ export * from "./PieChart/index.js";
 export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
+export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export * from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.13
+ * @mui/x-charts v8.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -27,6 +27,7 @@ export * from "./PieChart/index.js";
 export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
+export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
 export * from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";

package/esm/internals/clampAngle.d.ts

@@ -0,0 +1,2 @@
+/** Clamp angle to [0, 360[. */
+export declare function clampAngle(angle: number): number;

package/esm/internals/clampAngle.js

@@ -0,0 +1,4 @@
+/** Clamp angle to [0, 360[. */
+export function clampAngle(angle) {
+  return (angle % 360 + 360) % 360;
+}

package/esm/internals/components/AxisSharedComponents.js

@@ -11,9 +11,9 @@ export const AxisRoot = styled('g', {
   [`& .${axisClasses.tickLabel}`]: _extends({}, theme.typography.caption, {
     fill: (theme.vars || theme).palette.text.primary
   }),
-  [`& .${axisClasses.label}`]: _extends({}, theme.typography.body1, {
+  [`& .${axisClasses.label}`]: {
     fill: (theme.vars || theme).palette.text.primary
-  }),
+  },
   [`& .${axisClasses.line}`]: {
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',

package/esm/internals/configInit.d.ts

@@ -1,9 +1,16 @@
-import { ChartSeriesType } from "../models/seriesType/config.js";
+import { CartesianChartSeriesType, PolarChartSeriesType } from "../models/seriesType/config.js";
 declare class CartesianSeriesTypes {
-  types: Set<ChartSeriesType>;
+  types: Set<CartesianChartSeriesType>;
   constructor();
-  addType(value: ChartSeriesType): void;
-  getTypes(): Set<keyof import(".").ChartsSeriesConfig>;
+  addType(value: CartesianChartSeriesType): void;
+  getTypes(): Set<"line" | "scatter" | "bar">;
+}
+declare class PolarSeriesTypes {
+  types: Set<PolarChartSeriesType>;
+  constructor();
+  addType(value: PolarChartSeriesType): void;
+  getTypes(): Set<"radar">;
 }
 export declare const cartesianSeriesTypes: CartesianSeriesTypes;
+export declare const polarSeriesTypes: PolarSeriesTypes;
 export {};

package/esm/internals/configInit.js

@@ -1,11 +1,27 @@
-let instance;
+let cartesianInstance;
+let polarInstance;
 class CartesianSeriesTypes {
   constructor() {
     this.types = new Set();
-    if (instance) {
+    if (cartesianInstance) {
       throw new Error('You can only create one instance!');
     }
-    instance = this.types;
+    cartesianInstance = this.types;
+  }
+  addType(value) {
+    this.types.add(value);
+  }
+  getTypes() {
+    return this.types;
+  }
+}
+class PolarSeriesTypes {
+  constructor() {
+    this.types = new Set();
+    if (polarInstance) {
+      throw new Error('You can only create one instance!');
+    }
+    polarInstance = this.types;
   }
   addType(value) {
     this.types.add(value);
@@ -17,4 +33,6 @@ class CartesianSeriesTypes {
 export const cartesianSeriesTypes = new CartesianSeriesTypes();
 cartesianSeriesTypes.addType('bar');
 cartesianSeriesTypes.addType('line');
-cartesianSeriesTypes.addType('scatter');
+cartesianSeriesTypes.addType('scatter');
+export const polarSeriesTypes = new PolarSeriesTypes();
+polarSeriesTypes.addType('radar');

package/esm/internals/index.d.ts

@@ -15,6 +15,7 @@ export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
+export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
@@ -32,7 +33,11 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./stackSeries.js";
 export * from "./getCurve.js";
+export * from "./consumeSlots.js";
+export * from "./consumeThemeProps.js";
+export * from "./defaultizeMargin.js";
 export * from "../context/AnimationProvider/index.js";
 export type * from '../context/context.types';
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";

package/esm/internals/index.js

@@ -20,6 +20,7 @@ export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
+export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
@@ -42,7 +43,11 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./stackSeries.js";
 export * from "./getCurve.js";
+export * from "./consumeSlots.js";
+export * from "./consumeThemeProps.js";
+export * from "./defaultizeMargin.js";
 
 // contexts
 

package/esm/internals/invertTextAnchor.d.ts

@@ -0,0 +1,2 @@
+import { ChartsTextStyle } from "../ChartsText/index.js";
+export declare function invertTextAnchor(textAnchor: ChartsTextStyle['textAnchor']): ChartsTextStyle['textAnchor'];

package/esm/internals/invertTextAnchor.js

@@ -0,0 +1,10 @@
+export function invertTextAnchor(textAnchor) {
+  switch (textAnchor) {
+    case 'start':
+      return 'end';
+    case 'end':
+      return 'start';
+    default:
+      return textAnchor;
+  }
+}

package/esm/internals/isPolar.d.ts

@@ -0,0 +1,7 @@
+import { ChartSeriesType, PolarChartSeriesType, ChartSeriesDefaultized } from "../models/seriesType/config.js";
+export declare function isPolarSeriesType(seriesType: string): seriesType is PolarChartSeriesType;
+export declare function isPolarSeries(series: ChartSeriesDefaultized<ChartSeriesType> & {
+  getColor: (dataIndex: number) => string;
+}): series is ChartSeriesDefaultized<PolarChartSeriesType> & {
+  getColor: (dataIndex: number) => string;
+};

package/esm/internals/isPolar.js

@@ -0,0 +1,7 @@
+import { polarSeriesTypes } from "./configInit.js";
+export function isPolarSeriesType(seriesType) {
+  return polarSeriesTypes.getTypes().has(seriesType);
+}
+export function isPolarSeries(series) {
+  return isPolarSeriesType(series.type);
+}

package/esm/internals/plugins/allPlugins.d.ts

@@ -2,9 +2,10 @@ import { ChartSeriesType } from "../../models/seriesType/config.js";
 import { UseChartCartesianAxisSignature } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { UseChartHighlightSignature } from "./featurePlugins/useChartHighlight/index.js";
 import { UseChartInteractionSignature } from "./featurePlugins/useChartInteraction/index.js";
+import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
 import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
 import { ConvertSignaturesIntoPlugins } from "./models/helpers.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("./models").ChartPlugin<UseChartInteractionSignature> | import("./models").ChartPlugin<UseChartZAxisSignature> | import("./models").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("./models").ChartPlugin<UseChartHighlightSignature> | import("./models").ChartPlugin<UseChartVoronoiSignature>)[];
+export declare const ALL_PLUGINS: (import("./models").ChartPlugin<UseChartInteractionSignature> | import("./models").ChartPlugin<UseChartZAxisSignature> | import("./models").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("./models").ChartPlugin<UseChartHighlightSignature> | import("./models").ChartPlugin<UseChartPolarAxisSignature<any>> | import("./models").ChartPlugin<UseChartVoronoiSignature>)[];

package/esm/internals/plugins/allPlugins.js

@@ -3,6 +3,7 @@
 import { useChartCartesianAxis } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { useChartHighlight } from "./featurePlugins/useChartHighlight/index.js";
 import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
+import { useChartPolarAxis } from "./featurePlugins/useChartPolarAxis/index.js";
 import { useChartVoronoi } from "./featurePlugins/useChartVoronoi/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
-export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi];
+export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartPolarAxis, useChartInteraction, useChartHighlight, useChartVoronoi];

package/esm/internals/plugins/corePlugins/useChartSeries/processSeries.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeColor } from "../../../defaultizeColor.js";
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -20,23 +18,19 @@ export const preprocessSeries = ({
   // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
 
   series.forEach((seriesData, seriesIndex) => {
-    const {
-      id = `auto-generated-id-${seriesIndex}`,
-      type
-    } = seriesData;
-    if (seriesGroups[type] === undefined) {
-      seriesGroups[type] = {
+    const seriesWithDefaultValues = seriesConfig[seriesData.type].getSeriesWithDefaultValues(seriesData, seriesIndex, colors);
+    const id = seriesWithDefaultValues.id;
+    if (seriesGroups[seriesData.type] === undefined) {
+      seriesGroups[seriesData.type] = {
         series: {},
         seriesOrder: []
       };
     }
-    if (seriesGroups[type]?.series[id] !== undefined) {
+    if (seriesGroups[seriesData.type]?.series[id] !== undefined) {
       throw new Error(`MUI X: series' id "${id}" is not unique.`);
     }
-    seriesGroups[type].series[id] = _extends({
-      id
-    }, defaultizeColor(seriesData, seriesIndex, colors));
-    seriesGroups[type].seriesOrder.push(id);
+    seriesGroups[seriesData.type].series[id] = seriesWithDefaultValues;
+    seriesGroups[seriesData.type].seriesOrder.push(id);
   });
   const processedSeries = {};
   // Apply formatter on a type group

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -55,6 +55,7 @@ export function computeAxisValue({
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         offset: 0,
+        height: 0,
         categoryGapRatio,
         barGapRatio
       }, axis, {
@@ -74,7 +75,8 @@ export function computeAxisValue({
       const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
-        offset: 0
+        offset: 0,
+        height: 0
       }, axis, {
         data,
         scale: scalePoint(axis.data, zoomedRange),
@@ -114,7 +116,8 @@ export function computeAxisValue({
     const [minDomain, maxDomain] = finalScale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({
-      offset: 0
+      offset: 0,
+      height: 0
     }, axis, {
       data,
       scaleType: scaleType,

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.d.ts

@@ -2,5 +2,5 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { AxisConfig, ScaleName } from "../../../../models/index.js";
 import { ChartsXAxisProps, ChartsYAxisProps } from "../../../../models/axis.js";
 import { DatasetType } from "../../../../models/seriesType/config.js";
-export declare function defaultizeAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined, axisName: 'x'): AxisConfig<ScaleName, any, ChartsXAxisProps>[];
-export declare function defaultizeAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined, axisName: 'y'): AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+export declare function defaultizeXAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined): Array<AxisConfig<ScaleName, any, ChartsXAxisProps>>;
+export declare function defaultizeYAxis(inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined, dataset: Readonly<DatasetType> | undefined): Array<AxisConfig<ScaleName, any, ChartsYAxisProps>>;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -1,38 +1,78 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH } from "../../../../constants/index.js";
-export function defaultizeAxis(inAxis, dataset, axisName) {
-  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.js";
+export function defaultizeXAxis(inAxis, dataset) {
   const offsets = {
     top: 0,
-    right: 0,
     bottom: 0,
+    none: 0
+  };
+  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
+    id: DEFAULT_X_AXIS_KEY,
+    scaleType: 'linear'
+  }];
+  const parsedAxes = inputAxes.map((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+
+    // The first x-axis is defaultized to the bottom
+    const defaultPosition = index === 0 ? 'bottom' : 'none';
+    const position = axisConfig.position ?? defaultPosition;
+    const defaultHeight = DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const sharedConfig = _extends({
+      id: `defaultized-x-axis-${index}`,
+      offset: offsets[position]
+    }, axisConfig, {
+      position,
+      height: axisConfig.height ?? defaultHeight
+    });
+
+    // Increment the offset for the next axis
+    if (position !== 'none') {
+      offsets[position] += sharedConfig.height;
+    }
+
+    // If `dataKey` is NOT provided
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return sharedConfig;
+    }
+    if (dataset === undefined) {
+      throw new Error(`MUI X: x-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+
+    // If `dataKey` is provided
+    return _extends({}, sharedConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+  return parsedAxes;
+}
+export function defaultizeYAxis(inAxis, dataset) {
+  const offsets = {
+    right: 0,
     left: 0,
     none: 0
   };
   const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
-    id: DEFAULT_AXIS_KEY,
+    id: DEFAULT_Y_AXIS_KEY,
     scaleType: 'linear'
   }];
   const parsedAxes = inputAxes.map((axisConfig, index) => {
     const dataKey = axisConfig.dataKey;
-    const defaultPosition = axisName === 'x' ? 'bottom' : 'left';
-    const position = axisConfig.position ?? 'none';
-    const dimension = axisName === 'x' ? 'height' : 'width';
-    const height = axisName === 'x' ? DEFAULT_AXIS_SIZE_HEIGHT : 0;
-    const width = axisName === 'y' ? DEFAULT_AXIS_SIZE_WIDTH : 0;
+
+    // The first y-axis is defaultized to the left
+    const defaultPosition = index === 0 ? 'left' : 'none';
+    const position = axisConfig.position ?? defaultPosition;
+    const defaultWidth = DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
     const sharedConfig = _extends({
-      id: `defaultized-${axisName}-axis-${index}`
-    }, index === 0 ? {
-      position: defaultPosition
-    } : {}, {
-      height,
-      width,
+      id: `defaultized-y-axis-${index}`,
       offset: offsets[position]
-    }, axisConfig);
+    }, axisConfig, {
+      position,
+      width: axisConfig.width ?? defaultWidth
+    });
 
     // Increment the offset for the next axis
     if (position !== 'none') {
-      offsets[position] += axisConfig[dimension] ?? (dimension === 'height' ? height : width);
+      offsets[position] += sharedConfig.width;
     }
 
     // If `dataKey` is NOT provided
@@ -40,7 +80,7 @@ export function defaultizeAxis(inAxis, dataset, axisName) {
       return sharedConfig;
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X: y-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
 
     // If `dataKey` is provided

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts

@@ -1,7 +1,7 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export type * from './useChartCartesianAxis.types';
 export * from "./useChartCartesianAxisRendering.selectors.js";
-export { defaultizeAxis } from "./defaultizeAxis.js";
+export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";
 export * from "./zoom.types.js";

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -1,6 +1,6 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
-export { defaultizeAxis } from "./defaultizeAxis.js";
+export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";
 export * from "./zoom.types.js";

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -7,7 +7,7 @@ import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
 import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
-import { defaultizeAxis } from "./defaultizeAxis.js";
+import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
 import { getAxisValue } from "./getAxisValue.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
@@ -54,8 +54,8 @@ export const useChartCartesianAxis = ({
     }
     store.update(prev => _extends({}, prev, {
       cartesianAxis: _extends({}, prev.cartesianAxis, {
-        x: defaultizeAxis(xAxis, dataset, 'x'),
-        y: defaultizeAxis(yAxis, dataset, 'y')
+        x: defaultizeXAxis(xAxis, dataset),
+        y: defaultizeYAxis(yAxis, dataset)
       })
     }));
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
@@ -194,8 +194,8 @@ useChartCartesianAxis.getDefaultizedParams = ({
   return _extends({}, params, {
     colors: params.colors ?? rainbowSurgePalette,
     theme: params.theme ?? 'light',
-    defaultizedXAxis: defaultizeAxis(params.xAxis, params.dataset, 'x'),
-    defaultizedYAxis: defaultizeAxis(params.yAxis, params.dataset, 'y')
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
   });
 };
 useChartCartesianAxis.getInitialState = params => ({

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -9,24 +9,6 @@ import type { ChartsAxisProps } from '../../../../ChartsAxis';
 export type DefaultizedAxisConfig<AxisProps extends ChartsAxisProps> = {
   [axisId: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
 };
-export type CartesianContextState = {
-  /**
-   * Mapping from x-axis key to scaling configuration.
-   */
-  xAxis: DefaultizedAxisConfig<ChartsXAxisProps>;
-  /**
-   * Mapping from y-axis key to scaling configuration.
-   */
-  yAxis: DefaultizedAxisConfig<ChartsYAxisProps>;
-  /**
-   * The x-axes IDs sorted by order they got provided.
-   */
-  xAxisIds: AxisId[];
-  /**
-   * The y-axes IDs sorted by order they got provided.
-   */
-  yAxisIds: AxisId[];
-};
 export interface UseChartCartesianAxisParameters {
   /**
    * The configuration of the x-axes.