@mui/x-charts 8.8.0 → 8.9.2

package/SparkLineChart/SparkLineChart.js

@@ -484,6 +484,53 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  }), _propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['x']),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_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]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      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
+    })]),
+    constant: _propTypes.default.number,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
+    fill: _propTypes.default.string,
+    height: _propTypes.default.number,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['symlog']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelMinGap: _propTypes.default.number,
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
@@ -866,6 +913,52 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
+  }), _propTypes.default.shape({
+    axis: _propTypes.default.oneOf(['y']),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_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]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      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
+    })]),
+    constant: _propTypes.default.number,
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    ignoreTooltip: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    offset: _propTypes.default.number,
+    position: _propTypes.default.oneOf(['left', 'none', 'right']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['symlog']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    width: _propTypes.default.number
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,

package/esm/BarChart/BarChart.d.ts

@@ -15,12 +15,13 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type BarSeries = MakeOptional<BarSeriesType, 'type'>;
 export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'experimentalFeatures'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
-   * An array of [[BarSeriesType]] objects.
+   * An array of [[BarSeries]] objects.
    */
-  series: Readonly<MakeOptional<BarSeriesType, 'type'>[]>;
+  series: Readonly<BarSeries[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/esm/BarChart/BarChart.js

@@ -16,7 +16,7 @@ import { useBarChartProps } from "./useBarChartProps.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
-import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * The series to display in the bar chart.
-   * An array of [[BarSeriesType]] objects.
+   * An array of [[BarSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -388,6 +388,53 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['x']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    height: PropTypes.number,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'none', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelMinGap: PropTypes.number,
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
@@ -771,6 +818,52 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
+  }), PropTypes.shape({
+    axis: PropTypes.oneOf(['y']),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    constant: PropTypes.number,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
+    label: PropTypes.string,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    offset: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'none', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['symlog']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    width: PropTypes.number
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,

package/esm/BarChart/BarClipPath.d.ts

@@ -1,18 +1,21 @@
 import * as React from 'react';
-import { GetRadiusData } from "./getRadius.js";
-type UseAnimateBarClipRectParams = Pick<BarClipRectProps, 'x' | 'y' | 'width' | 'height' | 'skipAnimation'> & {
-  ref?: React.Ref<SVGRectElement>;
+interface UseAnimateBarClipPathParams {
+  ref?: React.Ref<SVGPathElement>;
+  layout: 'vertical' | 'horizontal';
+  hasNegative: boolean;
+  hasPositive: boolean;
+  xOrigin: number;
+  yOrigin: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
   borderRadius: number;
-  ownerState: Omit<GetRadiusData, 'borderRadius'>;
-};
-type UseAnimateBarClipRectReturn = {
-  ref: React.Ref<SVGRectElement>;
-  style: React.CSSProperties;
-} & Pick<BarClipRectProps, 'x' | 'y' | 'width' | 'height'>;
-export declare function useAnimateBarClipRect(props: UseAnimateBarClipRectParams): UseAnimateBarClipRectReturn;
-interface BarClipRectProps extends Pick<BarClipPathProps, 'x' | 'y' | 'width' | 'height' | 'skipAnimation'> {
-  ownerState: GetRadiusData;
+  skipAnimation: boolean;
 }
+export declare function useAnimateBarClipPath(props: UseAnimateBarClipPathParams): import("../index.js").UseAnimateReturn<SVGPathElement, {
+  d: string | undefined;
+}>;
 export interface BarClipPathProps {
   maskId: string;
   borderRadius?: number;
@@ -21,6 +24,8 @@ export interface BarClipPathProps {
   layout?: 'vertical' | 'horizontal';
   x: number;
   y: number;
+  xOrigin: number;
+  yOrigin: number;
   width: number;
   height: number;
   skipAnimation: boolean;

package/esm/BarChart/BarClipPath.js

@@ -1,24 +1,10 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["maskId", "x", "y", "width", "height", "skipAnimation"];
 import * as React from 'react';
 import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { useAnimate } from "../hooks/animation/index.js";
-import { getRadius } from "./getRadius.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function buildClipPath(size, borderRadius, ownerState) {
-  const radiusData = _extends({}, ownerState, {
-    borderRadius
-  });
-  const topLeft = Math.min(size, getRadius('top-left', radiusData));
-  const topRight = Math.min(size, getRadius('top-right', radiusData));
-  const bottomRight = Math.min(size, getRadius('bottom-right', radiusData));
-  const bottomLeft = Math.min(size, getRadius('bottom-left', radiusData));
-  return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
-}
-function barClipRectPropsInterpolator(from, to) {
+function barClipPathPropsInterpolator(from, to) {
   const interpolateX = interpolateNumber(from.x, to.x);
   const interpolateY = interpolateNumber(from.y, to.y);
   const interpolateWidth = interpolateNumber(from.width, to.width);
@@ -34,12 +20,12 @@ function barClipRectPropsInterpolator(from, to) {
     };
   };
 }
-export function useAnimateBarClipRect(props) {
+export function useAnimateBarClipPath(props) {
   const initialProps = {
-    x: props.x,
-    y: props.y + (props.ownerState.layout === 'vertical' ? props.height : 0),
-    width: props.ownerState.layout === 'vertical' ? props.width : 0,
-    height: props.ownerState.layout === 'vertical' ? 0 : props.height,
+    x: props.layout === 'vertical' ? props.x : props.xOrigin,
+    y: props.layout === 'vertical' ? props.yOrigin : props.y,
+    width: props.layout === 'vertical' ? props.width : 0,
+    height: props.layout === 'vertical' ? 0 : props.height,
     borderRadius: props.borderRadius
   };
   return useAnimate({
@@ -49,60 +35,88 @@ export function useAnimateBarClipRect(props) {
     height: props.height,
     borderRadius: props.borderRadius
   }, {
-    createInterpolator: barClipRectPropsInterpolator,
+    createInterpolator: barClipPathPropsInterpolator,
     transformProps: p => ({
-      x: p.x,
-      y: p.y,
-      width: p.width,
-      height: p.height,
-      style: {
-        clipPath: buildClipPath(props.ownerState.layout === 'vertical' ? p.height : p.width, p.borderRadius, props.ownerState)
-      }
+      d: generateClipPath(props.hasNegative, props.hasPositive, props.layout, p.x, p.y, p.width, p.height, props.xOrigin, props.yOrigin, p.borderRadius)
     }),
-    applyProps(element, animatedProps) {
-      element.setAttribute('x', animatedProps.x.toString());
-      element.setAttribute('y', animatedProps.y.toString());
-      element.setAttribute('width', animatedProps.width.toString());
-      element.setAttribute('height', animatedProps.height.toString());
-      element.style.clipPath = animatedProps.style.clipPath;
+    applyProps(element, {
+      d
+    }) {
+      if (d) {
+        element.setAttribute('d', d);
+      }
     },
     initialProps,
     skip: props.skipAnimation,
     ref: props.ref
   });
 }
-function BarClipRect(props) {
-  const animatedProps = useAnimateBarClipRect(_extends({}, props, {
-    borderRadius: props.ownerState.borderRadius ?? 0
-  }));
-  return /*#__PURE__*/_jsx("rect", _extends({}, animatedProps));
-}
 /**
  * @ignore - internal component.
  */
 function BarClipPath(props) {
   const {
-      maskId,
-      x,
-      y,
-      width,
-      height,
-      skipAnimation
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    maskId,
+    x,
+    y,
+    width,
+    height,
+    skipAnimation
+  } = props;
+  const {
+    ref,
+    d
+  } = useAnimateBarClipPath({
+    layout: props.layout ?? 'vertical',
+    hasNegative: props.hasNegative,
+    hasPositive: props.hasPositive,
+    xOrigin: props.xOrigin,
+    yOrigin: props.yOrigin,
+    x,
+    y,
+    width,
+    height,
+    borderRadius: props.borderRadius ?? 0,
+    skipAnimation
+  });
   if (!props.borderRadius || props.borderRadius <= 0) {
     return null;
   }
   return /*#__PURE__*/_jsx("clipPath", {
     id: maskId,
-    children: /*#__PURE__*/_jsx(BarClipRect, {
-      ownerState: rest,
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      skipAnimation: skipAnimation
+    children: /*#__PURE__*/_jsx("path", {
+      ref: ref,
+      d: d
     })
   });
 }
+function generateClipPath(hasNegative, hasPositive, layout, x, y, width, height, xOrigin, yOrigin, borderRadius) {
+  if (layout === 'vertical') {
+    if (hasPositive && hasNegative) {
+      const bR = Math.min(borderRadius, width / 2, height / 2);
+      return `M${x},${y + height / 2} v${-(height / 2 - bR)} a${bR},${bR} 0 0 1 ${bR},${-bR} h${width - bR * 2} a${bR},${bR} 0 0 1 ${bR},${bR} v${height - 2 * bR} a${bR},${bR} 0 0 1 ${-bR},${bR} h${-(width - bR * 2)} a${bR},${bR} 0 0 1 ${-bR},${-bR} v${-(height / 2 - bR)}`;
+    }
+    const bR = Math.min(borderRadius, width / 2);
+    if (hasPositive) {
+      return `M${x},${Math.max(yOrigin, y + bR)} v${Math.min(0, -(yOrigin - y - bR))} a${bR},${bR} 0 0 1 ${bR},${-bR} h${width - bR * 2} a${bR},${bR} 0 0 1 ${bR},${bR} v${Math.max(0, yOrigin - y - bR)} Z`;
+    }
+    if (hasNegative) {
+      return `M${x},${Math.min(yOrigin, y + height - bR)} v${Math.max(0, height - bR)} a${bR},${bR} 0 0 0 ${bR},${bR} h${width - bR * 2} a${bR},${bR} 0 0 0 ${bR},${-bR} v${-Math.max(0, height - bR)} Z`;
+    }
+  }
+  if (layout === 'horizontal') {
+    if (hasPositive && hasNegative) {
+      const bR = Math.min(borderRadius, width / 2, height / 2);
+      return `M${x + width / 2},${y} h${width / 2 - bR} a${bR},${bR} 0 0 1 ${bR},${bR} v${height - bR * 2} a${bR},${bR} 0 0 1 ${-bR},${bR} h${-(width - 2 * bR)} a${bR},${bR} 0 0 1 ${-bR},${-bR} v${-(height - bR * 2)} a${bR},${bR} 0 0 1 ${bR},${-bR} h${width / 2 - bR}`;
+    }
+    const bR = Math.min(borderRadius, height / 2);
+    if (hasPositive) {
+      return `M${Math.min(xOrigin, x - bR)},${y} h${width} a${bR},${bR} 0 0 1 ${bR},${bR} v${height - bR * 2} a${bR},${bR} 0 0 1 ${-bR},${bR} h${-width} Z`;
+    }
+    if (hasNegative) {
+      return `M${Math.max(xOrigin, x + width + bR)},${y} h${-width} a${bR},${bR} 0 0 0 ${-bR},${bR} v${height - bR * 2} a${bR},${bR} 0 0 0 ${bR},${bR} h${width} Z`;
+    }
+  }
+  return undefined;
+}
 export { BarClipPath };

package/esm/BarChart/BarPlot.js

@@ -64,6 +64,8 @@ function BarPlot(props) {
       id,
       x,
       y,
+      xOrigin,
+      yOrigin,
       width,
       height,
       hasPositive,
@@ -78,6 +80,8 @@ function BarPlot(props) {
         layout: layout,
         x: x,
         y: y,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
         width: width,
         height: height,
         skipAnimation: skipAnimation ?? false

package/esm/BarChart/barClasses.d.ts

@@ -9,4 +9,4 @@ export interface BarClasses {
 export type BarClassKey = keyof BarClasses;
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"series" | "root" | "seriesLabels", string>;

package/esm/BarChart/seriesConfig/extremums.js

@@ -1,3 +1,4 @@
+import { findMinMax } from "../../internals/findMinMax.js";
 const createResult = (data, direction) => {
   if (direction === 'x') {
     return {
@@ -24,9 +25,7 @@ const getBaseExtremum = params => {
     x: null,
     y: null
   }, i)) : axis.data;
-  const minX = Math.min(...(data ?? []));
-  const maxX = Math.max(...(data ?? []));
-  return [minX, maxX];
+  return findMinMax(data ?? []);
 };
 const getValueExtremum = direction => params => {
   const {

package/esm/BarChart/seriesConfig/seriesProcessor.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stackSeries.js";
-import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
+const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -46,7 +46,9 @@ const seriesProcessor = (params, dataset) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
         layout: 'vertical',
-        labelMarkType: 'square'
+        labelMarkType: 'square',
+        minBarSize: 0,
+        valueFormatter: series[id].valueFormatter ?? barValueFormatter
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
@@ -67,7 +69,7 @@ const seriesProcessor = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: completedSeries
   };
 };
 export default seriesProcessor;

package/esm/BarChart/useBarChartProps.d.ts

@@ -8,7 +8,7 @@ import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
+import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
 /**
  * A helper function that extracts BarChartProps from the input props

package/esm/BarChart/useBarPlotData.js

@@ -47,7 +47,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       const {
         stackedData,
         data: currentSeriesData,
-        layout
+        layout,
+        minBarSize
       } = series[seriesId];
       const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
         if (currentSeriesData[dataIndex] == null) {
@@ -58,16 +59,20 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
+        const {
+          barSize,
+          startCoordinate
+        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
         const result = {
           seriesId,
           dataIndex,
           layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
+          y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
           xOrigin: xScale(0) ?? 0,
           yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          height: verticalLayout ? barSize : barWidth,
+          width: verticalLayout ? barWidth : barSize,
           color: colorGetter(dataIndex),
           value: currentSeriesData[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
@@ -136,4 +141,26 @@ function getBandSize({
     barWidth,
     offset
   };
+}
+function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
+  if (baseValue === 0 || baseValue == null) {
+    return {
+      barSize: 0,
+      startCoordinate: minValueCoord
+    };
+  }
+  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
+  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
+  const isVerticalAndPositive = isVertical && baseValue >= 0;
+  const isHorizontalAndNegative = !isVertical && baseValue < 0;
+  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
+    return {
+      barSize,
+      startCoordinate: maxValueCoord - barSize
+    };
+  }
+  return {
+    barSize,
+    startCoordinate: minValueCoord
+  };
 }