@mui/x-charts 6.19.1 → 6.19.4

package/legacy/context/CartesianContextProvider.js

@@ -40,11 +40,11 @@ export var CartesianContext = /*#__PURE__*/React.createContext({
  *
  * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
  */
-function CartesianContextProvider(_ref) {
-  var inXAxis = _ref.xAxis,
-    inYAxis = _ref.yAxis,
-    dataset = _ref.dataset,
-    children = _ref.children;
+function CartesianContextProvider(props) {
+  var inXAxis = props.xAxis,
+    inYAxis = props.yAxis,
+    dataset = props.dataset,
+    children = props.children;
   var formattedSeries = React.useContext(SeriesContext);
   var drawingArea = React.useContext(DrawingContext);
   var xAxis = React.useMemo(function () {
@@ -82,9 +82,9 @@ function CartesianContextProvider(_ref) {
   var value = React.useMemo(function () {
     var _xAxis$map, _yAxis$map;
     var axisExtremumCallback = function axisExtremumCallback(acc, chartType, axis, getters, isDefaultAxis) {
-      var _ref2, _formattedSeries$char;
+      var _ref, _formattedSeries$char;
       var getter = getters[chartType];
-      var series = (_ref2 = (_formattedSeries$char = formattedSeries[chartType]) == null ? void 0 : _formattedSeries$char.series) != null ? _ref2 : {};
+      var series = (_ref = (_formattedSeries$char = formattedSeries[chartType]) == null ? void 0 : _formattedSeries$char.series) != null ? _ref : {};
       var _getter = getter({
           series: series,
           axis: axis,
@@ -114,8 +114,8 @@ function CartesianContextProvider(_ref) {
       return _extends({
         id: "deaultized-x-axis-".concat(index)
       }, axis);
-    })) != null ? _xAxis$map : []), _toConsumableArray(xAxis === undefined || xAxis.findIndex(function (_ref3) {
-      var id = _ref3.id;
+    })) != null ? _xAxis$map : []), _toConsumableArray(xAxis === undefined || xAxis.findIndex(function (_ref2) {
+      var id = _ref2.id;
       return id === DEFAULT_X_AXIS_KEY;
     }) === -1 ? [{
       id: DEFAULT_X_AXIS_KEY,
@@ -129,7 +129,7 @@ function CartesianContextProvider(_ref) {
         _getAxisExtremum2 = _slicedToArray(_getAxisExtremum, 2),
         minData = _getAxisExtremum2[0],
         maxData = _getAxisExtremum2[1];
-      var range = [drawingArea.left, drawingArea.left + drawingArea.width];
+      var range = axis.reverse ? [drawingArea.left + drawingArea.width, drawingArea.left] : [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
         var _axis$categoryGapRati, _axis$barGapRatio;
         var categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
@@ -171,8 +171,8 @@ function CartesianContextProvider(_ref) {
       return _extends({
         id: "deaultized-y-axis-".concat(index)
       }, axis);
-    })) != null ? _yAxis$map : []), _toConsumableArray(yAxis === undefined || yAxis.findIndex(function (_ref4) {
-      var id = _ref4.id;
+    })) != null ? _yAxis$map : []), _toConsumableArray(yAxis === undefined || yAxis.findIndex(function (_ref3) {
+      var id = _ref3.id;
       return id === DEFAULT_Y_AXIS_KEY;
     }) === -1 ? [{
       id: DEFAULT_Y_AXIS_KEY,
@@ -186,7 +186,7 @@ function CartesianContextProvider(_ref) {
         _getAxisExtremum4 = _slicedToArray(_getAxisExtremum3, 2),
         minData = _getAxisExtremum4[0],
         maxData = _getAxisExtremum4[1];
-      var range = [drawingArea.top + drawingArea.height, drawingArea.top];
+      var range = axis.reverse ? [drawingArea.top, drawingArea.top + drawingArea.height] : [drawingArea.top + drawingArea.height, drawingArea.top];
       if (isBandScaleConfig(axis)) {
         var _axis$categoryGapRati2;
         var categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
@@ -226,12 +226,12 @@ function CartesianContextProvider(_ref) {
     return {
       xAxis: completedXAxis,
       yAxis: completedYAxis,
-      xAxisIds: allXAxis.map(function (_ref5) {
-        var id = _ref5.id;
+      xAxisIds: allXAxis.map(function (_ref4) {
+        var id = _ref4.id;
         return id;
       }),
-      yAxisIds: allYAxis.map(function (_ref6) {
-        var id = _ref6.id;
+      yAxisIds: allYAxis.map(function (_ref5) {
+        var id = _ref5.id;
         return id;
       })
     };
@@ -258,7 +258,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -266,13 +266,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
@@ -292,7 +293,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -300,13 +301,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/legacy/context/DrawingProvider.js

@@ -23,12 +23,12 @@ export var SVGContext = /*#__PURE__*/React.createContext({
  *
  * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
  */
-function DrawingProvider(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    margin = _ref.margin,
-    svgRef = _ref.svgRef,
-    children = _ref.children;
+function DrawingProvider(props) {
+  var width = props.width,
+    height = props.height,
+    margin = props.margin,
+    svgRef = props.svgRef,
+    children = props.children;
   var drawingArea = useChartDimensions(width, height, margin);
   return /*#__PURE__*/_jsx(SVGContext.Provider, {
     value: svgRef,

package/legacy/context/HighlightProvider.js

@@ -34,8 +34,8 @@ var dataReducer = function dataReducer(prevState, action) {
       return prevState;
   }
 };
-export function HighlightProvider(_ref) {
-  var children = _ref.children;
+function HighlightProvider(props) {
+  var children = props.children;
   var _React$useReducer = React.useReducer(dataReducer, {
       item: null,
       scope: defaultScope
@@ -52,4 +52,5 @@ export function HighlightProvider(_ref) {
     value: value,
     children: children
   });
-}
+}
+export { HighlightProvider };

package/legacy/context/InteractionProvider.js

@@ -36,8 +36,8 @@ var dataReducer = function dataReducer(prevState, action) {
       return prevState;
   }
 };
-export function InteractionProvider(_ref) {
-  var children = _ref.children;
+function InteractionProvider(props) {
+  var children = props.children;
   var _React$useReducer = React.useReducer(dataReducer, {
       item: null,
       axis: {
@@ -57,4 +57,5 @@ export function InteractionProvider(_ref) {
     value: value,
     children: children
   });
-}
+}
+export { InteractionProvider };

package/legacy/context/SeriesContextProvider.js

@@ -56,12 +56,12 @@ var formatSeries = function formatSeries(series, colors, dataset) {
   });
   return formattedSeries;
 };
-export function SeriesContextProvider(_ref) {
-  var series = _ref.series,
-    dataset = _ref.dataset,
-    _ref$colors = _ref.colors,
-    colors = _ref$colors === void 0 ? blueberryTwilightPalette : _ref$colors,
-    children = _ref.children;
+function SeriesContextProvider(props) {
+  var series = props.series,
+    dataset = props.dataset,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? blueberryTwilightPalette : _props$colors,
+    children = props.children;
   var theme = useTheme();
   var formattedSeries = React.useMemo(function () {
     return formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset);
@@ -70,4 +70,5 @@ export function SeriesContextProvider(_ref) {
     value: formattedSeries,
     children: children
   });
-}
+}
+export { SeriesContextProvider };

package/legacy/hooks/useDrawingArea.js

@@ -5,13 +5,17 @@ export function useDrawingArea() {
     left = _React$useContext.left,
     top = _React$useContext.top,
     width = _React$useContext.width,
-    height = _React$useContext.height;
+    height = _React$useContext.height,
+    bottom = _React$useContext.bottom,
+    right = _React$useContext.right;
   return React.useMemo(function () {
     return {
       left: left,
       top: top,
       width: width,
-      height: height
+      height: height,
+      bottom: bottom,
+      right: right
     };
-  }, [height, left, top, width]);
+  }, [height, left, top, width, bottom, right]);
 }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.19.1
+ * @mui/x-charts v6.19.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -24,4 +24,6 @@ export * from './PieChart';
 export * from './ScatterChart';
 export * from './SparkLineChart';
 export * from './ChartContainer';
+export * from './ChartsSurface';
+export * from './ChartsLegend';
 export * from './ResponsiveChartContainer';

package/legacy/internals/components/AxisSharedComponents.js

@@ -9,18 +9,17 @@ export var AxisRoot = styled('g', {
     return styles.root;
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(axisClasses.tickLabel), _extends({}, theme.typography.caption, {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(axisClasses.tickLabel), _extends({}, theme.typography.caption, {
     fill: (theme.vars || theme).palette.text.primary
-  })), _defineProperty(_ref2, "& .".concat(axisClasses.label), _extends({}, theme.typography.body1, {
+  })), "& .".concat(axisClasses.label), _extends({}, theme.typography.body1, {
     fill: (theme.vars || theme).palette.text.primary
-  })), _defineProperty(_ref2, "& .".concat(axisClasses.line), {
+  })), "& .".concat(axisClasses.line), {
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1
-  }), _defineProperty(_ref2, "& .".concat(axisClasses.tick), {
+  }), "& .".concat(axisClasses.tick), {
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges'
-  }), _ref2;
+  });
 });

package/models/axis.d.ts

@@ -3,6 +3,7 @@ import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, S
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';
+export type AxisId = string | number;
 export type D3Scale<Domain extends {
     toString(): string;
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
@@ -24,7 +25,7 @@ export interface ChartsAxisProps extends TickParams {
      * The id of the axis to render.
      * If undefined, it will be the first defined axis.
      */
-    axisId?: string;
+    axisId?: AxisId;
     /**
      * If true, the axis line is disabled.
      * @default false
@@ -160,7 +161,7 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
     /**
      * Id used to identify the axis.
      */
-    id: string;
+    id: AxisId;
     /**
      * The minimal value of the domain.
      * If not provided, it gets computed to display the entire chart data.
@@ -184,6 +185,10 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
      * If `true`, hide this value in the tooltip
      */
     hideTooltip?: boolean;
+    /**
+     * If `true`, Reverse the axis scaleBand.
+     */
+    reverse?: boolean;
 } & Partial<ChartsXAxisProps | ChartsYAxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams;
 export type AxisDefaultized<S extends ScaleName = ScaleName, V = any> = Omit<AxisConfig<S, V>, 'scaleType'> & AxisScaleConfig[S] & {
     /**

package/models/seriesType/common.d.ts

@@ -1,7 +1,8 @@
 import type { HighlightScope } from '../../context/HighlightProvider';
 import type { StackOffsetType, StackOrderType } from '../stacking';
+export type SeriesId = number | string;
 export type CommonSeriesType<TValue> = {
-    id?: string;
+    id?: SeriesId;
     color?: string;
     /**
      * Formatter used to render values in tooltip or other data display.

package/models/seriesType/config.d.ts

@@ -5,6 +5,7 @@ import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueTyp
 import { AxisConfig } from '../axis';
 import { DefaultizedProps, MakeOptional } from '../helpers';
 import { StackingGroupsType } from '../../internals/stackSeries';
+import { SeriesId } from './common';
 interface ChartsSeriesConfig {
     bar: {
         seriesInput: DefaultizedProps<BarSeriesType, 'id'> & {
@@ -53,25 +54,19 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
 } : ChartsSeriesConfig[T]['series'];
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 type ExtremumGetterParams<T extends ChartSeriesType> = {
-    series: {
-        [id: string]: ChartSeries<T>;
-    };
+    series: Record<SeriesId, ChartSeries<T>>;
     axis: AxisConfig;
     isDefaultAxis: boolean;
 };
 export type ExtremumGetterResult = [number, number] | [null, null];
 export type ExtremumGetter<T extends ChartSeriesType> = (params: ExtremumGetterParams<T>) => ExtremumGetterResult;
 export type FormatterParams<T extends ChartSeriesType> = {
-    series: {
-        [id: string]: ChartsSeriesConfig[T]['seriesInput'];
-    };
-    seriesOrder: string[];
+    series: Record<SeriesId, ChartsSeriesConfig[T]['seriesInput']>;
+    seriesOrder: SeriesId[];
 };
 export type FormatterResult<T extends ChartSeriesType> = {
-    series: {
-        [id: string]: ChartSeriesDefaultized<T>;
-    };
-    seriesOrder: string[];
+    series: Record<SeriesId, ChartSeriesDefaultized<T>>;
+    seriesOrder: SeriesId[];
 } & (ChartsSeriesConfig[T] extends {
     canBeStacked: true;
 } ? {
@@ -95,7 +90,7 @@ export type LegendParams = {
      * The identifier of the legend element.
      * Used for internal purpose such as `key` props
      */
-    id: string;
+    id: SeriesId;
 };
 export type LegendGetter<T extends ChartSeriesType> = (series: FormatterResult<T>) => LegendParams[];
 export {};

package/models/seriesType/line.d.ts

@@ -1,6 +1,6 @@
 import { DefaultizedProps } from '../helpers';
 import type { StackOffsetType } from '../stacking';
-import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, StackableSeriesType } from './common';
+import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId, StackableSeriesType } from './common';
 export type CurveType = 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepBefore' | 'stepAfter';
 export interface ShowMarkParams<AxisValue = number | Date> {
     /**
@@ -66,7 +66,7 @@ export interface LineSeriesType extends CommonSeriesType<number>, CartesianSerie
  */
 export type LineItemIdentifier = {
     type: 'line';
-    seriesId: DefaultizedLineSeriesType['id'];
+    seriesId: SeriesId;
     /**
      * `dataIndex` can be `undefined` if the mouse is over the area and not a specific item.
      */

package/models/seriesType/pie.d.ts

@@ -1,8 +1,12 @@
 import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
 import { DefaultizedProps } from '../helpers';
-import { CommonDefaultizedProps, CommonSeriesType } from './common';
+import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
+export type PieItemId = string | number;
 export type PieValueType = {
-    id: string | number;
+    /**
+     * A unique identifier of the pie slice.
+     */
+    id: PieItemId;
     value: number;
     label?: string;
     color?: string;
@@ -63,6 +67,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
     /**
      * The minimal angle required to display the arc label.
+     * @default 0
      */
     arcLabelMinAngle?: number;
     /**
@@ -118,7 +123,7 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
  */
 export type PieItemIdentifier = {
     type: 'pie';
-    seriesId: DefaultizedPieSeriesType['id'];
+    seriesId: SeriesId;
     dataIndex: number;
 };
 export interface DefaultizedPieSeriesType extends DefaultizedProps<PieSeriesType, CommonDefaultizedProps> {

package/models/seriesType/scatter.d.ts

@@ -1,8 +1,11 @@
 import { DefaultizedProps } from '../helpers';
-import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType } from './common';
+import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
 export type ScatterValueType = {
     x: number;
     y: number;
+    /**
+     * A unique identifier for the scatter point
+     */
     id: string | number;
 };
 export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, CartesianSeriesType {
@@ -17,7 +20,7 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
  */
 export type ScatterItemIdentifier = {
     type: 'scatter';
-    seriesId: DefaultizedScatterSeriesType['id'];
+    seriesId: SeriesId;
     dataIndex: number;
 };
 export interface DefaultizedScatterSeriesType extends DefaultizedProps<ScatterSeriesType, CommonDefaultizedProps | 'color'> {

package/modern/BarChart/BarChart.js

@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -153,6 +153,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -178,7 +179,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -231,7 +232,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -260,7 +261,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
     }),
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     layout: PropTypes.oneOf(['horizontal', 'vertical']),
     stack: PropTypes.string,
@@ -302,7 +303,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -339,7 +340,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -347,13 +348,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
@@ -373,7 +375,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -381,13 +383,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/modern/BarChart/BarElement.js

@@ -102,6 +102,7 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/BarChart/BarPlot.js

@@ -9,7 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -19,7 +19,6 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -101,20 +100,19 @@ const useCompletedData = () => {
         color
       } = series[seriesId];
       return stackedData.map((values, dataIndex) => {
-        const bottom = Math.min(...values);
-        const top = Math.max(...values);
+        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+        const minValueCoord = Math.min(...valueCoordinates);
+        const maxValueCoord = Math.max(...valueCoordinates);
         return {
-          bottom,
-          top,
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(bottom),
-          y: verticalLayout ? yScale(top) : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
           xOrigin: xScale(0),
           yOrigin: yScale(0),
-          height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth,
-          width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)),
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color,
           highlightScope: series[seriesId].highlightScope
         };

package/modern/ChartsAxis/ChartsAxis.js

@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -127,7 +127,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -154,7 +154,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -191,7 +191,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,