@mui/x-charts 7.7.0 → 7.8.0

package/internals/defaultizeColor.d.ts

@@ -2,92 +2,92 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string);
         value: number;
         id?: import("../models/seriesType").PieItemId | undefined;
     }[];
     type: "pie";
-    innerRadius?: string | number | undefined;
-    outerRadius?: string | number | undefined;
-    arcLabelRadius?: string | number | undefined;
-    cornerRadius?: number | undefined;
-    startAngle?: number | undefined;
-    endAngle?: number | undefined;
-    paddingAngle?: number | undefined;
-    sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
-    arcLabel?: "label" | "value" | "formattedValue" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
-        label?: string | undefined;
-    }) => string) | undefined;
-    arcLabelMinAngle?: number | undefined;
-    cx?: string | number | undefined;
-    cy?: string | number | undefined;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    arcLabelRadius?: number | string;
+    cornerRadius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    sortingValues?: import("../models/seriesType").ChartsPieSorting;
+    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+        label?: string;
+    }) => string);
+    arcLabelMinAngle?: number;
+    cx?: number | string;
+    cy?: number | string;
     highlighted?: {
-        additionalRadius?: number | undefined;
-        innerRadius?: number | undefined;
-        outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        paddingAngle?: number | undefined;
-        arcLabelRadius?: number | undefined;
-        color?: string | undefined;
-    } | undefined;
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        paddingAngle?: number;
+        arcLabelRadius?: number;
+        color?: string;
+    };
     faded?: {
-        additionalRadius?: number | undefined;
-        innerRadius?: number | undefined;
-        outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        paddingAngle?: number | undefined;
-        arcLabelRadius?: number | undefined;
-        color?: string | undefined;
-    } | undefined;
-    id?: import(".").SeriesId | undefined;
-    color?: string | undefined;
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        paddingAngle?: number;
+        arcLabelRadius?: number;
+        color?: string;
+    };
+    id?: import(".").SeriesId;
+    color?: string;
     valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
 } | {
     type: "bar";
-    data?: (number | null)[] | undefined;
-    dataKey?: string | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
-    stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import(".").SeriesId | undefined;
+    data?: (number | null)[];
+    dataKey?: string;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    layout?: "horizontal" | "vertical";
+    stackOffset?: import("..").StackOffsetType;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
-    stack?: string | undefined;
-    stackOrder?: import("..").StackOrderType | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    stack?: string;
+    stackOrder?: import("..").StackOrderType;
 } | {
     type: "line";
-    data?: (number | null)[] | undefined;
-    dataKey?: string | undefined;
-    stack?: string | undefined;
-    area?: boolean | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    curve?: import("../models/seriesType").CurveType | undefined;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
-    disableHighlight?: boolean | undefined;
-    connectNulls?: boolean | undefined;
-    stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import(".").SeriesId | undefined;
+    data?: (number | null)[];
+    dataKey?: string;
+    stack?: string;
+    area?: boolean;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    curve?: import("../models/seriesType").CurveType;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean);
+    disableHighlight?: boolean;
+    connectNulls?: boolean;
+    stackOffset?: import("..").StackOffsetType;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
-    stackOrder?: import("..").StackOrderType | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    stackOrder?: import("..").StackOrderType;
 } | {
     type: "scatter";
     data: import("../models/seriesType").ScatterValueType[];
-    markerSize?: number | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    disableHover?: boolean | undefined;
-    zAxisKey?: string | undefined;
-    id?: import(".").SeriesId | undefined;
+    markerSize?: number;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    disableHover?: boolean;
+    zAxisKey?: string;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
 };

package/internals/getSVGPoint.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/internals/getSVGPoint.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSVGPoint = getSVGPoint;
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}

package/internals/getWordsByLines.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
 export interface ChartsTextStyle extends React.CSSProperties {
     angle?: number;

package/internals/index.d.ts

@@ -3,13 +3,21 @@ export * from '../ResponsiveChartContainer/useChartContainerDimensions';
 export * from '../ResponsiveChartContainer/ResizableContainer';
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useDrawingArea } from '../hooks/useDrawingArea';
+export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
+export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
+export { useLineChartProps } from '../LineChart/useLineChartProps';
+export { useBarChartProps } from '../BarChart/useBarChartProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
-export * from '../context/CartesianContextProvider';
+export * from './getSVGPoint';
+export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
+export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
 export * from '../context/SeriesContextProvider';
 export * from '../context/ZAxisContextProvider';
+export type * from '../context/context.types';
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';
 export * from '../models/helpers';

package/internals/index.js

@@ -5,14 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   useReducedMotion: true,
-  useSeries: true
+  useSeries: true,
+  useDrawingArea: true,
+  useChartContainerHooks: true,
+  useScatterChartProps: true,
+  useLineChartProps: true,
+  useBarChartProps: true
 };
+Object.defineProperty(exports, "useBarChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useBarChartProps.useBarChartProps;
+  }
+});
+Object.defineProperty(exports, "useChartContainerHooks", {
+  enumerable: true,
+  get: function () {
+    return _useChartContainerHooks.useChartContainerHooks;
+  }
+});
+Object.defineProperty(exports, "useDrawingArea", {
+  enumerable: true,
+  get: function () {
+    return _useDrawingArea.useDrawingArea;
+  }
+});
+Object.defineProperty(exports, "useLineChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useLineChartProps.useLineChartProps;
+  }
+});
 Object.defineProperty(exports, "useReducedMotion", {
   enumerable: true,
   get: function () {
     return _useReducedMotion.useReducedMotion;
   }
 });
+Object.defineProperty(exports, "useScatterChartProps", {
+  enumerable: true,
+  get: function () {
+    return _useScatterChartProps.useScatterChartProps;
+  }
+});
 Object.defineProperty(exports, "useSeries", {
   enumerable: true,
   get: function () {
@@ -57,6 +92,11 @@ Object.keys(_ResizableContainer).forEach(function (key) {
 });
 var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
+var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
+var _useLineChartProps = require("../LineChart/useLineChartProps");
+var _useBarChartProps = require("../BarChart/useBarChartProps");
 var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
 Object.keys(_defaultizeValueFormatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -81,15 +121,27 @@ Object.keys(_configInit).forEach(function (key) {
     }
   });
 });
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
-Object.keys(_CartesianContextProvider).forEach(function (key) {
+var _getSVGPoint = require("./getSVGPoint");
+Object.keys(_getSVGPoint).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getSVGPoint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getSVGPoint[key];
+    }
+  });
+});
+var _CartesianProvider = require("../context/CartesianProvider");
+Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CartesianContextProvider[key]) return;
+  if (key in exports && exports[key] === _CartesianProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _CartesianContextProvider[key];
+      return _CartesianProvider[key];
     }
   });
 });
@@ -105,6 +157,18 @@ Object.keys(_DrawingProvider).forEach(function (key) {
     }
   });
 });
+var _ColorProvider = require("../context/ColorProvider");
+Object.keys(_ColorProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ColorProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ColorProvider[key];
+    }
+  });
+});
 var _InteractionProvider = require("../context/InteractionProvider");
 Object.keys(_InteractionProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/useAnimatedPath.d.ts

@@ -1,2 +1 @@
-/// <reference types="@react-spring/core" />
 export declare const useAnimatedPath: (path: string, skipAnimation?: boolean) => import("@react-spring/core").Interpolation<string, any>;

package/internals/utils.d.ts

@@ -4,12 +4,6 @@ type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
 };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/internals/utils.js

@@ -5,25 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.cleanId = cleanId;
 exports.getPercentageValue = getPercentageValue;
-exports.getSVGPoint = getSVGPoint;
 exports.getSymbol = getSymbol;
 // Returns the index of a defined shape
 function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
 }
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}
-
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/models/axis.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
@@ -126,7 +125,7 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
      */
     position?: 'top' | 'bottom';
 }
-export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 export interface AxisScaleConfig {
     band: {

package/models/plugin.d.ts

@@ -1,4 +1,4 @@
-import { ChartSeriesType, ExtremumGetter, Formatter } from './seriesType/config';
+import { CartesianChartSeriesType, ChartSeriesType, ExtremumGetter, Formatter } from './seriesType/config';
 import { AxisDefaultized } from './axis';
 import { DefaultizedSeriesType } from './seriesType';
 import { ZAxisDefaultized } from './z-axis';
@@ -13,4 +13,7 @@ export type ChartsPluginType<T> = T extends ChartSeriesType ? {
     xExtremumGetter?: ExtremumGetter<T>;
     yExtremumGetter?: ExtremumGetter<T>;
 } : never;
+export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeriesType> = {
+    [K in T]?: ExtremumGetter<K>;
+};
 export {};

package/modern/BarChart/BarChart.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useId from '@mui/utils/useId';
 import PropTypes from 'prop-types';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
@@ -13,6 +11,7 @@ import { ChartsClipPath } from '../ChartsClipPath';
 import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
+import { useBarChartProps } from './useBarChartProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -27,108 +26,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    layout,
-    tooltip,
-    axisHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    skipAnimation,
-    borderRadius,
-    onItemClick,
-    onAxisClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    barLabel,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
-  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
-  const defaultAxisConfig = {
-    scaleType: 'band',
-    data: Array.from({
-      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-    }, (_, index) => index)
-  };
-  const defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
-    y: 'band'
-  } : {
-    x: 'band'
-  }, axisHighlight);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => _extends({
-      type: 'bar'
-    }, s, {
-      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-    })),
-    width: width,
-    height: height,
-    margin: margin,
-    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
-      id: DEFAULT_X_AXIS_KEY
-    }, defaultAxisConfig)]),
-    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
-      id: DEFAULT_Y_AXIS_KEY
-    }, defaultAxisConfig)] : undefined),
-    colors: colors,
-    dataset: dataset,
-    sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
-      onAxisClick: onAxisClick
-    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/_jsxs("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/_jsx(BarPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        skipAnimation: skipAnimation,
-        onItemClick: onItemClick,
-        borderRadius: borderRadius,
-        barLabel: barLabel
-      }), /*#__PURE__*/_jsx(ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/_jsx(ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsClipPath, {
-      id: clipPathId
-    }), children]
-  });
+    chartContainerProps,
+    barPlotProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    legendProps,
+    tooltipProps,
+    children
+  } = useBarChartProps(props);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+    ref: ref
+  }, chartContainerProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+      children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+  }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { BarLabelItem } from './BarLabelItem';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -73,26 +72,4 @@ function BarLabelPlot(props) {
     })))
   });
 }
-process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  bars: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    dataIndex: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    layout: PropTypes.oneOf(['horizontal', 'vertical']),
-    maskId: PropTypes.string.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    value: PropTypes.number,
-    width: PropTypes.number.isRequired,
-    x: PropTypes.number.isRequired,
-    xOrigin: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    yOrigin: PropTypes.number.isRequired
-  })).isRequired,
-  skipAnimation: PropTypes.bool
-} : void 0;
 export { BarLabelPlot };

package/modern/BarChart/BarPlot.js

@@ -4,7 +4,7 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { BarElement } from './BarElement';
 import getColor from './getColor';
 import { useChartId } from '../hooks';
@@ -47,7 +47,7 @@ const useAggregatedData = () => {
     stackingGroups: [],
     seriesOrder: []
   };
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
   const {
     series,