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

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -3,30 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartPropsSize = exports.selectorChartHasIntrinsicSize = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
+exports.selectorChartPropsSize = exports.selectorChartDrawingArea = exports.selectorChartDimensionsState = exports.selectorChartContainerSize = void 0;
 var _selectors = require("../../utils/selectors");
+var _useChartAxisSize = require("../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors");
 const selectorChartDimensionsState = state => state.dimensions;
 exports.selectorChartDimensionsState = selectorChartDimensionsState;
-const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
-  width: dimensionsState.width,
-  left: dimensionsState.left,
-  right: dimensionsState.right,
-  height: dimensionsState.height,
-  top: dimensionsState.top,
-  bottom: dimensionsState.bottom
+const selectorChartMargin = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.margin);
+const selectorChartWidth = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
+const selectorChartHeight = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
+const selectorChartTopMargin = (0, _selectors.createSelector)(selectorChartMargin, margin => margin.top);
+const selectorChartRightMargin = (0, _selectors.createSelector)(selectorChartMargin, margin => margin.right);
+const selectorChartBottomMargin = (0, _selectors.createSelector)(selectorChartMargin, margin => margin.bottom);
+const selectorChartLeftMargin = (0, _selectors.createSelector)(selectorChartMargin, margin => margin.left);
+const selectorChartDrawingArea = exports.selectorChartDrawingArea = (0, _selectors.createSelector)(selectorChartWidth, selectorChartHeight, selectorChartTopMargin, selectorChartRightMargin, selectorChartBottomMargin, selectorChartLeftMargin, _useChartAxisSize.selectorChartTopAxisSize, _useChartAxisSize.selectorChartRightAxisSize, _useChartAxisSize.selectorChartBottomAxisSize, _useChartAxisSize.selectorChartLeftAxisSize, (width, height, marginTop, marginRight, marginBottom, marginLeft, axisSizeTop, axisSizeRight, axisSizeBottom, axisSizeLeft) => ({
+  width: width - marginLeft - marginRight - axisSizeLeft - axisSizeRight,
+  left: marginLeft + axisSizeLeft,
+  right: marginRight + axisSizeRight,
+  height: height - marginTop - marginBottom - axisSizeTop - axisSizeBottom,
+  top: marginTop + axisSizeTop,
+  bottom: marginBottom + axisSizeBottom
 }));
 const selectorChartPropsSize = exports.selectorChartPropsSize = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
   width: dimensionsState.propsWidth,
   height: dimensionsState.propsHeight
 }));
-const selectorChartContainerSize = exports.selectorChartContainerSize = (0, _selectors.createSelector)(selectorChartDimensionsState, dimensionsState => ({
-  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
-  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
-}));
-
-/**
- * Get the id attribute of the chart.
- * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
- * @returns {string} The id attribute of the chart.
- */
-const selectorChartHasIntrinsicSize = exports.selectorChartHasIntrinsicSize = (0, _selectors.createSelector)(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);
+const selectorChartContainerSize = exports.selectorChartContainerSize = (0, _selectors.createSelector)(selectorChartWidth, selectorChartHeight, (width, height) => ({
+  width,
+  height
+}));

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -1,4 +1,5 @@
 import { ChartPluginSignature } from "../../models/index.js";
+import type { UseChartCartesianAxisSignature } from '../../featurePlugins/useChartCartesianAxis';
 export interface ChartMargin {
   /**
    * The gap between the left border of the SVG and the drawing area.
@@ -29,9 +30,10 @@ export interface UseChartDimensionsParameters {
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin?: Partial<ChartMargin>;
+  margin?: Partial<ChartMargin> | number;
 }
 export type UseChartDimensionsDefaultizedParameters = UseChartDimensionsParameters & {
   margin: ChartMargin;
@@ -39,21 +41,9 @@ export type UseChartDimensionsDefaultizedParameters = UseChartDimensionsParamete
 export interface UseChartDimensionsState {
   dimensions: {
     /**
-     * The gap between the left border of the SVG and the drawing area.
+     * The drawing area's margin.
      */
-    left: number;
-    /**
-     * The gap between the top border of the SVG and the drawing area.
-     */
-    top: number;
-    /**
-     * The gap between the bottom border of the SVG and the drawing area.
-     */
-    bottom: number;
-    /**
-     * The gap between the right border of the SVG and the drawing area.
-     */
-    right: number;
+    margin: ChartMargin;
     /**
      * The width of the drawing area.
      */
@@ -96,4 +86,5 @@ export type UseChartDimensionsSignature = ChartPluginSignature<{
   defaultizedParams: UseChartDimensionsDefaultizedParameters;
   state: UseChartDimensionsState;
   instance: UseChartDimensionsInstance;
+  optionalDependencies: [UseChartCartesianAxisSignature];
 }>;

package/internals/plugins/corePlugins/useChartSeries/processSeries.d.ts

@@ -16,8 +16,8 @@ export declare const preprocessSeries: <TSeriesType extends ChartSeriesType>({
   seriesConfig,
   dataset
 }: {
-  series: AllSeriesType<TSeriesType>[];
+  series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
-  dataset?: DatasetType;
+  dataset?: Readonly<DatasetType>;
 }) => { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> | undefined };

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

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.preprocessSeries = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defaultizeColor = require("../../../defaultizeColor");
 /**
  * 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
@@ -27,23 +24,19 @@ 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] = (0, _extends2.default)({
-      id
-    }, (0, _defaultizeColor.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/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -54,9 +54,8 @@ useChartSeries.params = {
 const EMPTY_ARRAY = [];
 useChartSeries.getDefaultizedParams = ({
   params
-}) => (0, _extends2.default)({
-  series: EMPTY_ARRAY
-}, params, {
+}) => (0, _extends2.default)({}, params, {
+  series: params.series?.length ? params.series : EMPTY_ARRAY,
   colors: params.colors ?? _colorPalettes.rainbowSurgePalette,
   theme: params.theme ?? 'light'
 });

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -7,13 +7,13 @@ export interface UseChartSeriesParameters<T extends ChartSeriesType = ChartSerie
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
-  dataset?: DatasetType;
+  dataset?: Readonly<DatasetType>;
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series?: AllSeriesType<T>[];
+  series?: Readonly<AllSeriesType<T>[]>;
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
@@ -27,7 +27,7 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: AllSeriesType<T>[];
+  series: Readonly<AllSeriesType<T>[]>;
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts

@@ -25,5 +25,5 @@ export declare function computeAxisValue<T extends ChartSeriesType>(options: Com
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
   axis?: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
   axisDirection: 'x';
-}): ComputeResult<ChartsAxisProps>;
+}): ComputeResult<ChartsXAxisProps>;
 export {};

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

@@ -61,6 +61,8 @@ function computeAxisValue({
       const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
       completeAxis[axis.id] = (0, _extends2.default)({
+        offset: 0,
+        height: 0,
         categoryGapRatio,
         barGapRatio
       }, axis, {
@@ -79,7 +81,10 @@ function computeAxisValue({
     if ((0, _axis.isPointScaleConfig)(axis)) {
       const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
       const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
-      completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
+      completeAxis[axis.id] = (0, _extends2.default)({
+        offset: 0,
+        height: 0
+      }, axis, {
         data,
         scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange),
         tickNumber: axis.data.length,
@@ -117,7 +122,10 @@ function computeAxisValue({
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
-    completeAxis[axis.id] = (0, _extends2.default)({}, axis, {
+    completeAxis[axis.id] = (0, _extends2.default)({
+      offset: 0,
+      height: 0
+    }, axis, {
       data,
       scaleType: scaleType,
       scale: finalScale.domain(domain),

package/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.d.ts

@@ -1,24 +1,22 @@
-import type { ChartsAxisProps } from '../../../../ChartsAxis';
-import { AxisId } from "../../../../models/axis.js";
+import { AxisId, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from "../../../../models/axis.js";
 import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
-import { AxisConfig, ScaleName } from "../../../../models/index.js";
+import { AxisConfig } from "../../../../models/index.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
 import { DefaultizedZoomOptions, ExtremumFilter } from "./useChartCartesianAxis.types.js";
 import { GetZoomAxisFilters, ZoomAxisFilters, ZoomData } from "./zoom.types.js";
-type CreateAxisFilterMapperParams = {
+export declare function createAxisFilterMapper(params: {
   zoomMap: Map<AxisId, ZoomData>;
   zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
   seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
   formattedSeries: ProcessedSeries;
-  direction: 'x' | 'y';
-};
-export declare const createAxisFilterMapper: ({
-  zoomMap,
-  zoomOptions,
-  seriesConfig,
-  formattedSeries,
-  direction
-}: CreateAxisFilterMapperParams) => (axis: AxisConfig<ScaleName, any, ChartsAxisProps>, axisIndex: number) => ExtremumFilter | null;
-export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;
-export {};
+  direction: 'x';
+}): (axis: AxisConfig<ScaleName, any, ChartsXAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare function createAxisFilterMapper(params: {
+  zoomMap: Map<AxisId, ZoomData>;
+  zoomOptions: Record<AxisId, DefaultizedZoomOptions>;
+  seriesConfig: ChartSeriesConfig<CartesianChartSeriesType>;
+  formattedSeries: ProcessedSeries;
+  direction: 'y';
+}): (axis: AxisConfig<ScaleName, any, ChartsYAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

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

@@ -3,54 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createGetAxisFilters = exports.createAxisFilterMapper = void 0;
+exports.createAxisFilterMapper = createAxisFilterMapper;
+exports.createGetAxisFilters = void 0;
 var _isDefined = require("../../../isDefined");
 var _getAxisExtremum = require("./getAxisExtremum");
 var _getScale = require("../../../getScale");
-const createAxisFilterMapper = ({
+function createAxisFilterMapper({
   zoomMap,
   zoomOptions,
   seriesConfig,
   formattedSeries,
   direction
-}) => (axis, axisIndex) => {
-  const zoomOption = zoomOptions[axis.id];
-  if (!zoomOption || zoomOption.filterMode !== 'discard') {
-    return null;
-  }
-  const zoom = zoomMap?.get(axis.id);
-  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
-    // No zoom, or zoom with all data visible
-    return null;
-  }
-  let extremums = [];
-  const scaleType = axis.scaleType;
-  if (scaleType === 'point' || scaleType === 'band') {
-    extremums = [0, (axis.data?.length ?? 1) - 1];
-  } else {
-    extremums = (0, _getAxisExtremum.getAxisExtremum)(axis, direction, seriesConfig, axisIndex, formattedSeries);
-  }
-  let min;
-  let max;
-  const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
-  [min, max] = (0, _getScale.getScale)(continuousScaleType, extremums, [0, 100]).nice().domain();
-  min = min instanceof Date ? min.getTime() : min;
-  max = max instanceof Date ? max.getTime() : max;
-  const minVal = min + zoom.start * (max - min) / 100;
-  const maxVal = min + zoom.end * (max - min) / 100;
-  return (value, dataIndex) => {
-    const val = value[direction] ?? axis.data?.[dataIndex];
-    if (val == null) {
-      // If the value does not exist because of missing data point, or out of range index, we just ignore.
-      return true;
+}) {
+  return (axis, axisIndex) => {
+    const zoomOption = zoomOptions[axis.id];
+    if (!zoomOption || zoomOption.filterMode !== 'discard') {
+      return null;
+    }
+    const zoom = zoomMap?.get(axis.id);
+    if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+      // No zoom, or zoom with all data visible
+      return null;
     }
-    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
-      return dataIndex >= minVal && dataIndex <= maxVal;
+    let extremums = [];
+    const scaleType = axis.scaleType;
+    if (scaleType === 'point' || scaleType === 'band') {
+      extremums = [0, (axis.data?.length ?? 1) - 1];
+    } else {
+      extremums = (0, _getAxisExtremum.getAxisExtremum)(axis, direction, seriesConfig, axisIndex, formattedSeries);
     }
-    return val >= minVal && val <= maxVal;
+    let min;
+    let max;
+    const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
+    [min, max] = (0, _getScale.getScale)(continuousScaleType, extremums, [0, 100]).nice().domain();
+    min = min instanceof Date ? min.getTime() : min;
+    max = max instanceof Date ? max.getTime() : max;
+    const minVal = min + zoom.start * (max - min) / 100;
+    const maxVal = min + zoom.end * (max - min) / 100;
+    return (value, dataIndex) => {
+      const val = value[direction] ?? axis.data?.[dataIndex];
+      if (val == null) {
+        // If the value does not exist because of missing data point, or out of range index, we just ignore.
+        return true;
+      }
+      if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+        return dataIndex >= minVal && dataIndex <= maxVal;
+      }
+      return val >= minVal && val <= maxVal;
+    };
   };
-};
-exports.createAxisFilterMapper = createAxisFilterMapper;
+}
 const createGetAxisFilters = filters => ({
   currentAxisId,
   seriesXAxisId,

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

@@ -1,39 +1,6 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { AxisConfig, ScaleName } from "../../../../models/index.js";
-import { ChartsAxisProps } from "../../../../models/axis.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../../../../models/axis.js";
 import { DatasetType } from "../../../../models/seriesType/config.js";
-export declare function defaultizeAxis(inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, 'id'>[] | undefined, dataset: DatasetType | undefined, axisName: 'x' | 'y'): {
-  label?: string | undefined;
-  reverse?: boolean | undefined;
-  fill?: string | undefined;
-  data?: any[] | undefined;
-  slots?: Partial<import("../../..").ChartsAxisSlots> | undefined;
-  slotProps?: Partial<import("../../..").ChartsAxisSlotProps> | undefined;
-  classes?: Partial<import("../../../..").ChartsAxisClasses> | undefined;
-  stroke?: string | undefined;
-  sx?: import("@mui/system").SxProps | undefined;
-  valueFormatter?: (<TScaleName extends keyof import("../../..").AxisScaleConfig>(value: any, context: import("../../..").AxisValueFormatterContext<TScaleName>) => string) | undefined;
-  dataKey?: string | undefined;
-  min?: (number | Date) | undefined;
-  max?: (number | Date) | undefined;
-  tickMaxStep?: number | undefined;
-  tickMinStep?: number | undefined;
-  tickNumber?: number | undefined;
-  disableLine?: boolean | undefined;
-  disableTicks?: boolean | undefined;
-  tickLabelStyle?: import("../../../getWordsByLines").ChartsTextStyle | undefined;
-  labelStyle?: import("../../../getWordsByLines").ChartsTextStyle | undefined;
-  tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
-  tickSize?: number | undefined;
-  tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
-  tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
-  tickLabelPlacement?: "middle" | "tick" | undefined;
-  scaleType?: "time" | "linear" | "band" | "point" | "log" | "pow" | "sqrt" | "utc" | undefined;
-  colorMap?: import("../../../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
-  hideTooltip?: boolean | undefined;
-  domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
-    min: number;
-    max: number;
-  }) | undefined;
-  id: import("../../..").AxisId;
-}[];
+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/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -4,28 +4,97 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultizeAxis = defaultizeAxis;
+exports.defaultizeXAxis = defaultizeXAxis;
+exports.defaultizeYAxis = defaultizeYAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _constants = require("../../../../constants");
-function defaultizeAxis(inAxis, dataset, axisName) {
-  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
-  return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
-    id: `defaultized-${axisName}-axis-${index}`
-  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
-    id
-  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
-    id: DEFAULT_AXIS_KEY,
+function defaultizeXAxis(inAxis, dataset) {
+  const offsets = {
+    top: 0,
+    bottom: 0,
+    none: 0
+  };
+  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
+    id: _constants.DEFAULT_X_AXIS_KEY,
     scaleType: 'linear'
-  }] : [])].map(axisConfig => {
+  }];
+  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 = _constants.DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const sharedConfig = (0, _extends2.default)({
+      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 axisConfig;
+      return sharedConfig;
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X: x-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
-    return (0, _extends2.default)({}, axisConfig, {
+
+    // If `dataKey` is provided
+    return (0, _extends2.default)({}, sharedConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+  return parsedAxes;
+}
+function defaultizeYAxis(inAxis, dataset) {
+  const offsets = {
+    right: 0,
+    left: 0,
+    none: 0
+  };
+  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
+    id: _constants.DEFAULT_Y_AXIS_KEY,
+    scaleType: 'linear'
+  }];
+  const parsedAxes = inputAxes.map((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+
+    // The first y-axis is defaultized to the left
+    const defaultPosition = index === 0 ? 'left' : 'none';
+    const position = axisConfig.position ?? defaultPosition;
+    const defaultWidth = _constants.DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? _constants.AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const sharedConfig = (0, _extends2.default)({
+      id: `defaultized-y-axis-${index}`,
+      offset: offsets[position]
+    }, axisConfig, {
+      position,
+      width: axisConfig.width ?? defaultWidth
+    });
+
+    // Increment the offset for the next axis
+    if (position !== 'none') {
+      offsets[position] += sharedConfig.width;
+    }
+
+    // If `dataKey` is NOT provided
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return sharedConfig;
+    }
+    if (dataset === undefined) {
+      throw new Error(`MUI X: y-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+
+    // If `dataKey` is provided
+    return (0, _extends2.default)({}, sharedConfig, {
       data: dataset.map(d => d[dataKey])
     });
   });
+  return parsedAxes;
 }

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

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

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

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   useChartCartesianAxis: true,
-  defaultizeAxis: true
+  defaultizeXAxis: true,
+  defaultizeYAxis: true
 };
-Object.defineProperty(exports, "defaultizeAxis", {
+Object.defineProperty(exports, "defaultizeXAxis", {
   enumerable: true,
   get: function () {
-    return _defaultizeAxis.defaultizeAxis;
+    return _defaultizeAxis.defaultizeXAxis;
+  }
+});
+Object.defineProperty(exports, "defaultizeYAxis", {
+  enumerable: true,
+  get: function () {
+    return _defaultizeAxis.defaultizeYAxis;
   }
 });
 Object.defineProperty(exports, "useChartCartesianAxis", {
@@ -20,15 +27,15 @@ Object.defineProperty(exports, "useChartCartesianAxis", {
   }
 });
 var _useChartCartesianAxis = require("./useChartCartesianAxis");
-var _useChartCartesianAxis2 = require("./useChartCartesianAxis.selectors");
-Object.keys(_useChartCartesianAxis2).forEach(function (key) {
+var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
+Object.keys(_useChartCartesianAxisRendering).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useChartCartesianAxis2[key]) return;
+  if (key in exports && exports[key] === _useChartCartesianAxisRendering[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useChartCartesianAxis2[key];
+      return _useChartCartesianAxisRendering[key];
     }
   });
 });