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

package/models/axis.d.ts

@@ -1,5 +1,6 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-charts-vendor/d3-scale';
 import { SxProps } from '@mui/system/styleFunctionSx';
+import { MakeRequired } from '@mui/x-internals/types';
 import { ChartsAxisClasses } from "../ChartsAxis/axisClasses.js";
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from "../ChartsText/index.js";
@@ -104,17 +105,54 @@ export interface ChartsAxisProps extends TickParams {
   sx?: SxProps;
 }
 export interface ChartsYAxisProps extends ChartsAxisProps {
+  axis?: 'y';
+}
+export interface ChartsXAxisProps extends ChartsAxisProps {
+  axis?: 'x';
   /**
-   * Position of the axis.
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
    */
-  position?: 'left' | 'right';
+  tickLabelMinGap?: number;
 }
-export interface ChartsXAxisProps extends ChartsAxisProps {
+type AxisSideConfig<AxisProps extends ChartsAxisProps> = AxisProps extends ChartsXAxisProps ? {
   /**
    * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
    */
-  position?: 'top' | 'bottom';
-}
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * @default 30
+   */
+  height?: number;
+} : AxisProps extends ChartsYAxisProps ? {
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'left' | 'right' | 'none';
+  /**
+   * The width of the axis.
+   * @default 30
+   */
+  width?: number;
+} : {
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'none';
+  height?: number;
+  width?: number;
+};
 export interface ChartsRotationAxisProps extends ChartsAxisProps {
   /**
    * The start angle (in deg).
@@ -242,7 +280,7 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    */
   scale: AxisScaleConfig[S]['scale'];
 };
-export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
+export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
   /**
    * Id used to identify the axis.
    */
@@ -260,7 +298,7 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
   /**
    * The data used by `'band'` and `'point'` scales.
    */
-  data?: V[];
+  data?: readonly V[];
   /**
    * The key used to retrieve `data` from the `dataset` prop.
    */
@@ -280,6 +318,13 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
    * If `true`, Reverse the axis scaleBand.
    */
   reverse?: boolean;
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
   /**
    * Defines the axis scale domain based on the min/max values of series linked to it.
    * - 'nice': Rounds the domain at human friendly values.
@@ -290,9 +335,9 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
     min: number;
     max: number;
   });
-} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams & AxisConfigExtension;
+} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {}
-export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps = ChartsXAxisProps | ChartsYAxisProps> = Omit<AxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = MakeRequired<Omit<AxisConfig<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisSideConfig<AxisProps> & AxisScaleComputedConfig[S] & {
   /**
    * An indication of the expected number of ticks.
    */
@@ -320,4 +365,5 @@ export interface ChartsAxisData {
    * The mapping of series ids to their value for this particular axis index.
    */
   seriesValues: Record<string, number | null | undefined>;
-}
+}
+export {};

package/models/colorMapping.d.ts

@@ -33,7 +33,7 @@ export interface OrdinalColorConfig<Value = number | Date | string> {
    * The value to map.
    * If undefined, it will be integers from 0 to the number of colors.
    */
-  values?: Value[];
+  values?: readonly Value[];
   /**
    * The color palette.
    * Items equal to `values[k]` will get the color of `colors[k]`.

package/models/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./seriesType/index.js";
-export * from "./layout.js";
 export * from "./stacking.js";
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData } from './axis';
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -14,17 +14,6 @@ Object.keys(_seriesType).forEach(function (key) {
     }
   });
 });
-var _layout = require("./layout");
-Object.keys(_layout).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _layout[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _layout[key];
-    }
-  });
-});
 var _stacking = require("./stacking");
 Object.keys(_stacking).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/models/seriesType/bar.d.ts

@@ -6,7 +6,7 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
   /**
    * Data associated to each bar.
    */
-  data?: (number | null)[];
+  data?: readonly (number | null)[];
   /**
    * The key used to retrieve data from the dataset.
    */

package/models/seriesType/config.d.ts

@@ -76,6 +76,6 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 } : ChartsSeriesConfig[T]['series'];
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type DatasetElementType<T> = {
-  [key: string]: T;
+  [key: string]: Readonly<T>;
 };
 export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];

package/models/seriesType/line.d.ts

@@ -29,7 +29,7 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
   /**
    * Data associated to the line.
    */
-  data?: (number | null)[];
+  data?: readonly (number | null)[];
   /**
    * The key used to retrieve data from the dataset.
    */

package/models/seriesType/pie.d.ts

@@ -27,7 +27,7 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
 export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData> {
   type: 'pie';
-  data: TData[];
+  data: Readonly<TData[]>;
   /**
    * 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%'.

package/models/seriesType/scatter.d.ts

@@ -11,7 +11,7 @@ export type ScatterValueType = {
 };
 export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null>, CartesianSeriesType {
   type: 'scatter';
-  data?: ScatterValueType[];
+  data?: readonly ScatterValueType[];
   markerSize?: number;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.

package/models/z-axis.d.ts

@@ -2,7 +2,7 @@ import type { ScaleOrdinal, ScaleSequential, ScaleThreshold } from '@mui/x-chart
 import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
 export interface ZAxisConfig<V = any> {
   id: string;
-  data?: V[];
+  data?: readonly V[];
   /**
    * The key used to retrieve `data` from the `dataset` prop.
    */

package/modern/BarChart/BarChart.d.ts

@@ -18,7 +18,7 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
    * The series to display in the bar chart.
    * An array of [[BarSeriesType]] objects.
    */
-  series: MakeOptional<BarSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<BarSeriesType, 'type'>[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/modern/BarChart/BarChart.js

@@ -92,12 +92,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Defines the border radius of the bar element.
    */
   borderRadius: PropTypes.number,
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -149,12 +143,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default 'vertical'
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -163,14 +151,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   /**
    * 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: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
-  }),
+  })]),
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
@@ -190,12 +179,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeriesType]] objects.
@@ -219,12 +202,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -235,6 +212,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -257,13 +235,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -272,6 +252,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
@@ -287,6 +268,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -315,7 +297,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -331,7 +314,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }))
 } : void 0;
 export { BarChart };

package/modern/BarChart/useBarChartProps.js

@@ -2,10 +2,9 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
-import { calculateMargins } from "../internals/calculateMargins.js";
 import { BAR_CHART_PLUGINS } from "./BarChart.plugins.js";
 
 /**
@@ -28,10 +27,6 @@ export const useBarChartProps = props => {
       sx,
       axisHighlight,
       grid,
-      topAxis,
-      leftAxis,
-      rightAxis,
-      bottomAxis,
       children,
       slots,
       slotProps,
@@ -43,8 +38,7 @@ export const useBarChartProps = props => {
       onHighlightChange,
       borderRadius,
       barLabel,
-      className,
-      hideLegend
+      className
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -64,12 +58,7 @@ export const useBarChartProps = props => {
     })),
     width,
     height,
-    margin: calculateMargins({
-      margin,
-      hideLegend,
-      slotProps,
-      series
-    }),
+    margin,
     colors,
     dataset,
     xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
@@ -108,10 +97,6 @@ export const useBarChartProps = props => {
     loading
   };
   const chartsAxisProps = {
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     slots,
     slotProps
   };

package/modern/ChartContainer/ChartContainer.d.ts

@@ -25,7 +25,7 @@ export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeries
  *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
  * >
  *    <BarPlot />
- *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ *    <ChartsXAxis axisId="x-axis" />
  * </ChartContainer>
  * ```
  */

package/modern/ChartContainer/ChartContainer.js

@@ -27,7 +27,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
  * >
  *    <BarPlot />
- *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ *    <ChartsXAxis axisId="x-axis" />
  * </ChartContainer>
  * ```
  */
@@ -96,14 +96,15 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   /**
    * 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: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
-  }),
+  })]),
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
@@ -153,6 +154,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -175,13 +177,15 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
+    height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -190,6 +194,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
@@ -205,6 +210,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -233,7 +239,8 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
@@ -249,7 +256,8 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   })),
   /**
    * The configuration of the z-axes.

package/modern/ChartDataProvider/ChartDataProvider.d.ts

@@ -14,7 +14,7 @@ export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeries
  *
  * Demos:
  *
- * - [Composition](https://mui.com/x/api/charts/composition/)
+ * - [Composition](https://mui.com/x/react-charts/composition/)
  *
  * API:
  *
@@ -28,7 +28,7 @@ export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeries
  * >
  *   <ChartsSurface>
  *      <BarPlot />
- *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *      <ChartsXAxis axisId="x-axis" />
  *   </ChartsSurface>
  *   {'Custom Legend Component'}
  * </ChartDataProvider>

package/modern/ChartDataProvider/ChartDataProvider.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Demos:
  *
- * - [Composition](https://mui.com/x/api/charts/composition/)
+ * - [Composition](https://mui.com/x/react-charts/composition/)
  *
  * API:
  *
@@ -28,7 +28,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * >
  *   <ChartsSurface>
  *      <BarPlot />
- *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *      <ChartsXAxis axisId="x-axis" />
  *   </ChartsSurface>
  *   {'Custom Legend Component'}
  * </ChartDataProvider>
@@ -74,7 +74,8 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   /**
    * 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: PropTypes.any,
   /**

package/modern/ChartsAxis/ChartsAxis.d.ts

@@ -1,30 +1,6 @@
 import * as React from 'react';
-import { ChartsAxisSlotProps, ChartsAxisSlots, ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 export interface ChartsAxisProps {
-  /**
-   * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default null
-   */
-  topAxis?: null | string | ChartsXAxisProps;
-  /**
-   * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
-   * @default xAxisIds[0] The id of the first provided axis
-   */
-  bottomAxis?: null | string | ChartsXAxisProps;
-  /**
-   * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default yAxisIds[0] The id of the first provided axis
-   */
-  leftAxis?: null | string | ChartsYAxisProps;
-  /**
-   * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
-   * @default null
-   */
-  rightAxis?: null | string | ChartsYAxisProps;
   /**
    * Overridable component slots.
    * @default {}