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

package/modern/FunnelChart/useFunnelChartProps.js

@@ -0,0 +1,161 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+import { DEFAULT_MARGINS, DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
+import useId from '@mui/utils/useId';
+import { defaultizeMargin } from '@mui/x-charts/internals';
+import { warnOnce } from '@mui/x-internals/warning';
+function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
+  const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
+  const maxSeriesValue = Array.from({
+    length: maxSeriesLength
+  }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
+  if (process.env.NODE_ENV !== 'production') {
+    if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
+      warnOnce([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+    }
+  }
+  const side = isHorizontal ? 'bottom' : 'left';
+  const categoryValues = _extends({
+    id: direction === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY
+  }, categoryAxis, categoryAxis?.size ? {
+    [isHorizontal ? 'height' : 'width']: categoryAxis.size
+  } : {}, {
+    position: categoryAxis?.position ?? (categoryAxis?.categories ? side : 'none')
+  });
+
+  // If the scaleType is not defined or is 'band', our job is simple.
+  if (!categoryAxis?.scaleType || categoryAxis.scaleType === 'band') {
+    return _extends({
+      scaleType: 'band',
+      categoryGapRatio: 0,
+      // Use the categories as the domain if they are defined.
+      data: categoryAxis?.categories ? categoryAxis.categories :
+      // Otherwise we just need random data to create the band scale.
+      Array.from({
+        length: maxSeriesLength
+      }, (_, index) => index),
+      tickLabelPlacement: 'middle'
+    }, categoryValues);
+  }
+
+  // If the scaleType is other than 'band', we have to do some magic.
+  // First we need to calculate the tick values additively and in reverse order.
+  const tickValues = [...maxSeriesValue.toReversed().map((_, i, arr) => arr.slice(0, i).reduce((a, value) => a + value, 0)),
+  // We add the total value of the series as the last tick value
+  maxSeriesValue.reduce((a, value) => a + value, 0)];
+  return _extends({
+    scaleType: categoryAxis.scaleType,
+    domainLimit: 'strict',
+    tickLabelPlacement: 'middle',
+    tickInterval: tickValues,
+    // No need to show the first tick label
+    tickLabelInterval: (_, i) => i !== 0,
+    // We trick the valueFormatter to show the category values.
+    // By using the index of the tickValues array we can get the category value.
+    valueFormatter: value => `${categoryAxis.categories?.toReversed()[tickValues.findIndex(v => v === value) - 1]}`
+  }, categoryValues);
+}
+
+/**
+ * A helper function that extracts FunnelChartProps from the input props
+ * and returns an object with props for the children components of FunnelChart.
+ *
+ * @param props The input props for FunnelChart
+ * @returns An object with props for the children components of FunnelChart
+ */
+export const useFunnelChartProps = props => {
+  const {
+      categoryAxis,
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      children,
+      slots,
+      slotProps,
+      loading,
+      onItemClick,
+      highlightedItem,
+      onHighlightChange,
+      className,
+      axisHighlight,
+      apiRef
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const isHorizontal = series.some(s => s.layout === 'horizontal');
+  const valueAxisConfig = {
+    id: isHorizontal ? DEFAULT_Y_AXIS_KEY : DEFAULT_X_AXIS_KEY,
+    scaleType: 'linear',
+    domainLimit: 'strict',
+    position: 'none'
+  };
+  const xAxis = isHorizontal ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x') : valueAxisConfig;
+  const yAxis = isHorizontal ? valueAxisConfig : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
+  const chartContainerProps = _extends({}, rest, {
+    series: series.map(s => _extends({
+      type: 'funnel',
+      layout: isHorizontal ? 'horizontal' : 'vertical'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    xAxis: [xAxis],
+    yAxis: [yAxis],
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    className,
+    apiRef
+  });
+  const funnelPlotProps = {
+    onItemClick,
+    slots,
+    slotProps
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = {
+    slots,
+    slotProps
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
+  const axisHighlightProps = _extends({}, axisHighlight);
+  return {
+    chartContainerProps,
+    funnelPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    legendProps,
+    clipPathGroupProps,
+    clipPathProps,
+    chartsWrapperProps,
+    axisHighlightProps,
+    children
+  };
+};

package/modern/Heatmap/Heatmap.d.ts

@@ -8,6 +8,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { HeatmapTooltipProps } from "./HeatmapTooltip.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
+import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
 export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {
   /**
    * Custom component for the tooltip popper.
@@ -18,24 +19,24 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
 export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps {
   tooltip?: Partial<HeatmapTooltipProps>;
 }
-export interface HeatmapProps extends Omit<ChartContainerProProps, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'zoom' | 'onZoomChange' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginsSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'skipAnimation'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[];
+  xAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[];
+  yAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeriesType]] objects.
    */
-  series: MakeOptional<HeatmapSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<HeatmapSeriesType, 'type'>[]>;
   /**
    * The configuration of the tooltip.
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.

package/modern/Heatmap/Heatmap.js

@@ -9,6 +9,7 @@ import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ChartContainerPro } from "../ChartContainerPro/index.js";
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { seriesConfig as heatmapSeriesConfig } from "./seriesConfig/index.js";
@@ -20,6 +21,16 @@ const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#
 const seriesConfig = {
   heatmap: heatmapSeriesConfig
 };
+function getDefaultDataForAxis(series, dimension) {
+  if (series?.[0]?.data === undefined || series[0].data.length === 0) {
+    return [];
+  }
+  return Array.from({
+    length: Math.max(...series[0].data.map(dataPoint => dataPoint[dimension])) + 1
+  }, (_, index) => index);
+}
+const getDefaultDataForXAxis = series => getDefaultDataForAxis(series, 0);
+const getDefaultDataForYAxis = series => getDefaultDataForAxis(series, 1);
 const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -36,10 +47,6 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     colors,
     dataset,
     sx,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
     onAxisClick,
     children,
     slots,
@@ -50,14 +57,22 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
-  const defaultizedXAxis = React.useMemo(() => xAxis.map(axis => _extends({
+  const defaultizedXAxis = React.useMemo(() => (xAxis && xAxis.length > 0 ? xAxis : [{
+    id: DEFAULT_X_AXIS_KEY
+  }]).map(axis => _extends({
     scaleType: 'band',
     categoryGapRatio: 0
-  }, axis)), [xAxis]);
-  const defaultizedYAxis = React.useMemo(() => yAxis.map(axis => _extends({
+  }, axis, {
+    data: axis.data ?? getDefaultDataForXAxis(series)
+  })), [series, xAxis]);
+  const defaultizedYAxis = React.useMemo(() => (yAxis && yAxis.length > 0 ? yAxis : [{
+    id: DEFAULT_Y_AXIS_KEY
+  }]).map(axis => _extends({
     scaleType: 'band',
     categoryGapRatio: 0
-  }, axis)), [yAxis]);
+  }, axis, {
+    data: axis.data ?? getDefaultDataForYAxis(series)
+  })), [series, yAxis]);
   const defaultizedZAxis = React.useMemo(() => zAxis ?? [{
     colorMap: {
       type: 'continuous',
@@ -98,10 +113,6 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
         slotProps: slotProps
       })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
     }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -115,16 +126,8 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
-    current: PropTypes.shape({
-      setZoomData: PropTypes.func.isRequired
-    })
+    current: PropTypes.object
   }),
-  /**
-   * 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,
   /**
@@ -160,20 +163,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
-  /**
-   * The list of zoom data related to each axis.
-   */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
-  })),
-  /**
-   * 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
@@ -182,14 +171,15 @@ process.env.NODE_ENV !== "production" ? Heatmap.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.
@@ -203,12 +193,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: 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 [[HeatmapSeriesType]] objects.
@@ -237,12 +221,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
   tooltip: PropTypes.object,
-  /**
-   * 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.
    */
@@ -253,6 +231,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
@@ -277,13 +256,15 @@ process.env.NODE_ENV !== "production" ? Heatmap.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']),
     slotProps: PropTypes.object,
@@ -292,6 +273,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.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,
@@ -316,6 +298,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
@@ -346,7 +329,8 @@ process.env.NODE_ENV !== "production" ? Heatmap.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']),
     slotProps: PropTypes.object,
@@ -363,6 +347,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
+    width: PropTypes.number,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,

package/modern/Heatmap/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -0,0 +1,3 @@
+import { GetSeriesWithDefaultValues } from '@mui/x-charts/internals';
+declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'heatmap'>;
+export default getSeriesWithDefaultValues;

package/modern/Heatmap/seriesConfig/getSeriesWithDefaultValues.js

@@ -0,0 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+  return _extends({
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length]
+  }, seriesData);
+};
+export default getSeriesWithDefaultValues;

package/modern/Heatmap/seriesConfig/index.js

@@ -2,11 +2,13 @@ import { getBaseExtremum } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import tooltipGetter from "./tooltip.js";
+import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 export const seriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter: () => [],
   tooltipGetter,
   xExtremumGetter: getBaseExtremum,
-  yExtremumGetter: getBaseExtremum
+  yExtremumGetter: getBaseExtremum,
+  getSeriesWithDefaultValues
 };

package/modern/LineChartPro/LineChartPro.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { LineChartProps } from '@mui/x-charts/LineChart';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line'>, 'series' | 'plugins' | 'seriesConfig'> {}
+import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
 /**
  * Demos:
  *

package/modern/LineChartPro/LineChartPro.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -137,6 +137,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
   });
   const {
       initialZoom,
+      zoomData,
       onZoomChange,
       apiRef
     } = props,
@@ -162,6 +163,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
     chartsSurfaceProps
   } = useChartContainerProProps(_extends({}, chartContainerProps, {
     initialZoom,
+    zoomData,
     onZoomChange,
     apiRef,
     plugins: LINE_CHART_PRO_PLUGINS
@@ -199,12 +201,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
-  /**
-   * 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,
   /**
@@ -257,18 +253,13 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   id: PropTypes.string,
   /**
    * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
    */
   initialZoom: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
   })),
-  /**
-   * 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
@@ -277,14 +268,15 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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
-  }),
+  })]),
   /**
    * Callback fired when an area element is clicked.
    */
@@ -316,12 +308,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: 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 line chart.
    * An array of [[LineSeriesType]] objects.
@@ -345,12 +331,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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.
    */
@@ -361,6 +341,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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,
@@ -383,13 +364,15 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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,
@@ -398,6 +381,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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,
@@ -422,6 +406,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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,
@@ -450,7 +435,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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,
@@ -467,6 +453,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
+    width: PropTypes.number,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -501,6 +488,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number
+  })),
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoomData: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
   }))
 } : void 0;
 export { LineChartPro };