@mui/x-charts 7.3.2 → 7.5.0

package/BarChart/BarChart.js

@@ -55,6 +55,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     rightAxis,
     bottomAxis,
     skipAnimation,
+    borderRadius,
     onItemClick,
     onAxisClick,
     children,
@@ -107,7 +108,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
         slots: slots,
         slotProps: slotProps,
         skipAnimation: skipAnimation,
-        onItemClick: onItemClick
+        onItemClick: onItemClick,
+        borderRadius: borderRadius
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
         loading: loading,
         slots: slots,
@@ -146,6 +148,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.number,
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -208,6 +214,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: _propTypes.default.bool,
   /**
@@ -300,6 +307,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -308,11 +320,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -353,6 +360,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -361,11 +373,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,

package/BarChart/BarClipPath.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface BarClipPathProps {
+    maskId: string;
+    borderRadius?: number;
+    hasNegative: boolean;
+    hasPositive: boolean;
+    layout?: 'vertical' | 'horizontal';
+    style: {};
+}
+/**
+ * @ignore - internal component.
+ */
+declare function BarClipPath(props: BarClipPathProps): React.JSX.Element | null;
+export { BarClipPath };

package/BarChart/BarClipPath.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarClipPath = BarClipPath;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _web = require("@react-spring/web");
+var _getRadius = require("./getRadius");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["style", "maskId"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
+function BarClipRect(props) {
+  const radiusData = props.ownerState;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+    style: (0, _extends2.default)({}, props.style, {
+      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
+        topLeft: Math.min(value, (0, _getRadius.getRadius)('top-left', radiusData)),
+        topRight: Math.min(value, (0, _getRadius.getRadius)('top-right', radiusData)),
+        bottomRight: Math.min(value, (0, _getRadius.getRadius)('bottom-right', radiusData)),
+        bottomLeft: Math.min(value, (0, _getRadius.getRadius)('bottom-left', radiusData))
+      }))
+    })
+  });
+}
+/**
+ * @ignore - internal component.
+ */
+function BarClipPath(props) {
+  const {
+      style,
+      maskId
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (!props.borderRadius || props.borderRadius <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+    id: maskId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BarClipRect, {
+      ownerState: rest,
+      style: style
+    })
+  });
+}

package/BarChart/BarElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="@react-spring/shared" />
 import * as React from 'react';
+import { AnimatedProps } from '@react-spring/web';
 import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
@@ -17,7 +18,7 @@ export interface BarElementOwnerState {
 }
 export declare function getBarElementUtilityClass(slot: string): string;
 export declare const barElementClasses: BarElementClasses;
-export declare const BarElementPath: import("@emotion/styled").StyledComponent<Pick<import("@react-spring/web").AnimatedProps<{
+export declare const BarElementPath: import("@emotion/styled").StyledComponent<Pick<AnimatedProps<{
     string?: string | number | undefined;
     end?: string | number | undefined;
     accumulate?: "none" | "sum" | undefined;
@@ -1352,9 +1353,13 @@ export declare const BarElementPath: import("@emotion/styled").StyledComponent<P
 }, "string" | "end" | "accumulate" | "local" | "color" | "clip" | "style" | "unicode" | "fill" | "stroke" | "x" | "y" | "clipPath" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "path" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "scrollTop" | "scrollLeft"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: BarElementOwnerState;
 }, {}, {}>;
-interface BarProps extends Omit<React.ComponentPropsWithoutRef<'path'>, 'id' | 'color'> {
+interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'>, AnimatedProps<{
+    x?: string | number | undefined;
+    y?: string | number | undefined;
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+}> {
     highlightScope?: Partial<HighlightScope>;
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     ownerState: BarElementOwnerState;
 }
 export interface BarElementSlots {
@@ -1362,12 +1367,12 @@ export interface BarElementSlots {
      * The component that renders the bar.
      * @default BarElementPath
      */
-    bar?: React.JSXElementConstructor<BarProps>;
+    bar?: React.ElementType<BarProps>;
 }
 export interface BarElementSlotProps {
     bar?: Partial<BarProps>;
 }
-export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & {
+export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
     highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.

package/BarChart/BarElement.js

@@ -90,16 +90,17 @@ function BarElement(props) {
   const barProps = (0, _utils.useSlotProps)({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
-    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+    externalForwardedProps: other,
+    additionalProps: (0, _extends2.default)({}, getInteractionItemProps({
       type: 'bar',
       seriesId: id,
       dataIndex
     }), {
       style,
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, (0, _extends2.default)({}, barProps));

package/BarChart/BarPlot.d.ts

@@ -17,6 +17,10 @@ export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps
      * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
      */
     onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+    /**
+     * Defines the border radius of the bar element.
+     */
+    borderRadius?: number;
 }
 /**
  * Demos:

package/BarChart/BarPlot.js

@@ -16,8 +16,10 @@ var _BarElement = require("./BarElement");
 var _axis = require("../models/axis");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _hooks = require("../hooks");
+var _BarClipPath = require("./BarClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -54,6 +56,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const chartId = (0, _hooks.useChartId)();
   const {
     series,
     stackingGroups
@@ -66,6 +69,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -119,7 +123,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -130,14 +135,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -156,7 +188,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -180,41 +212,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const transition = (0, _web.useTransition)(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = (0, _web.useTransition)(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarClipPath.BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -222,6 +290,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/BarChart/getRadius.d.ts

@@ -0,0 +1,15 @@
+type GetRadiusData = {
+    hasNegative: boolean;
+    hasPositive: boolean;
+    borderRadius?: number;
+    layout?: 'vertical' | 'horizontal';
+};
+type GetRadiusCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export declare const getRadius: (corner: GetRadiusCorner, { hasNegative, hasPositive, borderRadius, layout }: GetRadiusData) => number;
+export {};

package/BarChart/getRadius.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadius = void 0;
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};
+exports.getRadius = getRadius;

package/BarChart/legend.js

@@ -4,16 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _getLabel = require("../internals/getLabel");
 const legendGetter = params => {
   const {
     seriesOrder,
     series
   } = params;
-  const data = seriesOrder.map(seriesId => ({
-    color: series[seriesId].color,
-    label: series[seriesId].label,
-    id: seriesId
-  }));
-  return data.filter(item => item.label !== undefined);
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      color: series[seriesId].color,
+      label: formattedLabel,
+      id: seriesId
+    });
+    return acc;
+  }, []);
 };
 var _default = exports.default = legendGetter;

package/BarChart/types.d.ts

@@ -0,0 +1,25 @@
+import type { HighlightScope } from '../context';
+import type { BarSeriesType } from '../models';
+import type { SeriesId } from '../models/seriesType/common';
+export type AnimationData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    yOrigin: number;
+    xOrigin: number;
+    layout: BarSeriesType['layout'];
+};
+export interface CompletedBarData extends AnimationData {
+    seriesId: SeriesId;
+    dataIndex: number;
+    color: string;
+    value: number | null;
+    highlightScope?: Partial<HighlightScope>;
+    maskId: string;
+}
+export interface MaskData extends AnimationData {
+    id: string;
+    hasNegative: boolean;
+    hasPositive: boolean;
+}

package/BarChart/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});