@mui/x-charts 8.22.1 → 8.24.0

package/RadarChart/RadarChart.js

@@ -91,6 +91,31 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['radar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -147,6 +172,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/RadarChart/RadarChart.plugins.d.ts

@@ -2,5 +2,6 @@ import { type UseChartPolarAxisSignature } from "../internals/plugins/featurePlu
 import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>, import("../internals/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>];
+export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'radar'>];

package/RadarChart/RadarChart.plugins.js

@@ -8,4 +8,5 @@ var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPo
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartPolarAxis.useChartPolarAxis, _useChartHighlight.useChartHighlight];
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartPolarAxis.useChartPolarAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager];

package/RadarChart/seriesConfig/index.js

@@ -13,6 +13,7 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _identifierSerializer = require("../../internals/identifierSerializer");
 const radarSeriesConfig = exports.radarSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -22,5 +23,6 @@ const radarSeriesConfig = exports.radarSeriesConfig = {
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   radiusExtremumGetter: _extremums.radiusExtremumGetter,
-  rotationExtremumGetter: _extremums.rotationExtremumGetter
+  rotationExtremumGetter: _extremums.rotationExtremumGetter,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

package/RadarChart/seriesConfig/legend.js

@@ -16,6 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'radar',
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/ScatterChart/BatchScatter.js

@@ -12,21 +12,12 @@ var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
 var _useScale = require("../hooks/useScale");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+var _appendAtKey = require("../internals/appendAtKey");
 var _jsxRuntime = require("react/jsx-runtime");
 const MAX_POINTS_PER_PATH = 1000;
 /* In an SVG arc, if the arc starts and ends at the same point, it is not rendered, so we add a tiny
  * value to one of the coordinates to ensure that the arc is rendered. */
 const ALMOST_ZERO = 0.01;
-function appendAtKey(map, key, value) {
-  let bucket = map.get(key);
-  if (!bucket) {
-    bucket = [value];
-    map.set(key, bucket);
-  } else {
-    bucket.push(value);
-  }
-  return bucket;
-}
 function createPath(x, y, markerSize) {
   return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
 }
@@ -47,15 +38,15 @@ function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGett
     }
     const path = createPath(x, y, markerSize);
     const fill = colorGetter ? colorGetter(i) : color;
-    const tempPath = appendAtKey(temporaryPaths, fill, path);
+    const tempPath = (0, _appendAtKey.appendAtKey)(temporaryPaths, fill, path);
     if (tempPath.length >= MAX_POINTS_PER_PATH) {
-      appendAtKey(paths, fill, tempPath.join(''));
+      (0, _appendAtKey.appendAtKey)(paths, fill, tempPath.join(''));
       temporaryPaths.delete(fill);
     }
   }
   for (const [fill, tempPath] of temporaryPaths.entries()) {
     if (tempPath.length > 0) {
-      appendAtKey(paths, fill, tempPath.join(''));
+      (0, _appendAtKey.appendAtKey)(paths, fill, tempPath.join(''));
     }
   }
   return paths;
@@ -87,7 +78,10 @@ function BatchScatterPaths(props) {
 }
 const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
 if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
-const Group = (0, _styles.styled)('g')({
+const Group = (0, _styles.styled)('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   '&[data-faded="true"]': {
     opacity: 0.3
   },

package/ScatterChart/FocusedScatterMark.js

@@ -25,7 +25,7 @@ function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
-  if (focusedItem === null || focusedItem.seriesType !== 'scatter' || !scatterSeries) {
+  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
   const series = scatterSeries?.series[focusedItem.seriesId];

package/ScatterChart/ScatterChart.js

@@ -131,6 +131,31 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['scatter']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -176,6 +201,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/ScatterChart/ScatterChart.plugins.d.ts

@@ -7,5 +7,6 @@ import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/h
 import { type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.js

@@ -12,4 +12,5 @@ var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHi
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const SCATTER_CHART_PLUGINS = exports.SCATTER_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/ScatterChart/seriesConfig/index.js

@@ -12,6 +12,8 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
+var _identifierSerializer = require("../../internals/identifierSerializer");
 const scatterSeriesConfig = exports.scatterSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -20,5 +22,7 @@ const scatterSeriesConfig = exports.scatterSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

package/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', 'bar' | 'line' | 'scatter'>;
+export default keyboardFocusHandler;

package/ScatterChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowLeft':
+      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowDown':
+      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+    case 'ArrowUp':
+      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+var _default = exports.default = keyboardFocusHandler;

package/ScatterChart/seriesConfig/legend.js

@@ -16,6 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'scatter',
       markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,

package/SparkLineChart/SparkLineChart.js

@@ -248,6 +248,47 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['line']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['scatter']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['pie']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['radar']).isRequired
+  })]).isRequired),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -293,6 +334,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/BarChart/BarChart.js

@@ -134,6 +134,31 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['bar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -192,6 +217,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -212,6 +242,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] objects.

package/esm/BarChart/BarChart.plugins.d.ts

@@ -6,5 +6,6 @@ import { type UseChartHighlightSignature } from "../internals/plugins/featurePlu
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'bar'>, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/esm/BarChart/BarChart.plugins.js

@@ -5,4 +5,5 @@ import { useChartInteraction } from "../internals/plugins/featurePlugins/useChar
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const BAR_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartKeyboardNavigation];

package/esm/BarChart/BarElement.js

@@ -43,7 +43,7 @@ function BarElement(props) {
     isHighlighted
   } = useItemHighlighted(itemIdentifier);
   const isFocused = useIsItemFocused(React.useMemo(() => ({
-    seriesType: 'bar',
+    type: 'bar',
     seriesId: id,
     dataIndex
   }), [id, dataIndex]));

package/esm/BarChart/BarLabel/BarLabel.d.ts

@@ -32,6 +32,8 @@ export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' |
    * @default 'center'
    */
   placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
 };
 declare function BarLabel(inProps: BarLabelProps): React.JSX.Element;
 declare namespace BarLabel {

package/esm/BarChart/BarLabel/BarLabel.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement", "hidden"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -34,7 +34,8 @@ function BarLabel(inProps) {
     name: 'MuiBarLabel'
   });
   const {
-      isFaded
+      isFaded,
+      hidden
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const animatedProps = useAnimateBarLabel(props);
@@ -44,7 +45,7 @@ function BarLabel(inProps) {
   return /*#__PURE__*/_jsx(BarLabelComponent, _extends({
     textAnchor: textAnchor,
     dominantBaseline: dominantBaseline,
-    opacity: fadedOpacity
+    opacity: hidden ? 0 : fadedOpacity
   }, otherProps, animatedProps));
 }
 function getTextAnchor({
@@ -86,6 +87,10 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * Height of the bar this label belongs to.
    */
   height: PropTypes.number.isRequired,
+  /**
+   * If true, the bar label is hidden.
+   */
+  hidden: PropTypes.bool,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -74,6 +74,8 @@ export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwne
    * @default 'center'
    */
   barLabelPlacement?: BarLabelProps['placement'];
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
 };
 /**
  * @ignore - internal component.

package/esm/BarChart/BarLabel/BarLabelItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement"],
+const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement", "hidden"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -31,7 +31,8 @@ function BarLabelItem(props) {
       value,
       skipAnimation,
       layout,
-      barLabelPlacement
+      barLabelPlacement,
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -87,6 +88,7 @@ function BarLabelItem(props) {
     return null;
   }
   return /*#__PURE__*/_jsx(Component, _extends({}, barLabelProps, barLabelOwnerState, {
+    hidden: hidden,
     children: formattedLabelText
   }));
 }

package/esm/BarChart/BarPlot.d.ts

@@ -3,6 +3,7 @@ import { type BarElementSlotProps, type BarElementSlots } from "./BarElement.js"
 import { type BarItemIdentifier } from "../models/index.js";
 import { type BarLabelSlotProps, type BarLabelSlots } from "./BarLabel/BarLabelItem.js";
 import type { BarItem, BarLabelContext } from "./BarLabel/index.js";
+import { type RendererType } from "../ScatterChart/index.js";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface BarPlotProps {
@@ -16,7 +17,7 @@ export interface BarPlotProps {
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  onItemClick?(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier): void;
   /**
    * Defines the border radius of the bar element.
    */
@@ -30,6 +31,15 @@ export interface BarPlotProps {
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
   /**
    * The props used for each component slot.
    * @default {}
@@ -52,7 +62,7 @@ export interface BarPlotProps {
  *
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
-declare function BarPlot(props: BarPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function BarPlot(props: BarPlotProps): React.JSX.Element;
 declare namespace BarPlot {
   var propTypes: any;
 }