@mui/x-charts 8.17.0 → 8.19.0

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"],
+const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -30,7 +30,8 @@ function BarLabelItem(props) {
       height,
       value,
       skipAnimation,
-      layout
+      layout,
+      barLabelPlacement
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -62,6 +63,7 @@ function BarLabelItem(props) {
         y,
         width,
         height,
+        placement: barLabelPlacement,
         className: classes.root
       }),
       ownerState

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["processedSeries", "skipAnimation"];
-import * as React from 'react';
 import { BarLabelItem } from "./BarLabelItem.js";
 import { useUtilityClasses } from "../barClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -51,7 +50,8 @@ function BarLabelPlot(props) {
       skipAnimation: skipAnimation ?? false,
       layout: layout ?? 'vertical'
     }, other, {
-      barLabel: barLabel
+      barLabel: barLabel,
+      barLabelPlacement: processedSeries.barLabelPlacement || 'center'
     }), dataIndex))
   }, seriesId);
 }

package/esm/BarChart/BarPlot.js

@@ -155,6 +155,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @returns {string} The formatted label.
    */
   barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered inside or outside the bar.
+   */
+  barLabelPlacement: PropTypes.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */

package/esm/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -27,6 +27,20 @@ const seriesProcessor = (params, dataset) => {
     } else if (dataset === undefined) {
       throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+        if (!dataKey) {
+          throw new Error([`MUI X Charts: bar series with id='${id}' has no data and no dataKey.`, 'You must provide a dataKey when using the dataset prop.'].join('\n'));
+        }
+        dataset.forEach((entry, index) => {
+          const value = entry[dataKey];
+          if (value != null && typeof value !== 'number') {
+            warnOnce([`MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.`, 'Bar plots only support numeric and null values.'].join('\n'));
+          }
+        });
+      }
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -52,15 +66,7 @@ const seriesProcessor = (params, dataset) => {
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
-          if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production') {
-              if (value !== null) {
-                warnOnce([`MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
-              }
-            }
-            return null;
-          }
-          return value;
+          return typeof value === 'number' ? value : null;
         }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });

package/esm/BarChart/types.d.ts

@@ -13,6 +13,7 @@ export interface ProcessedBarSeriesData {
   seriesId: SeriesId;
   data: ProcessedBarData[];
   barLabel?: BarSeriesType['barLabel'];
+  barLabelPlacement?: BarSeriesType['barLabelPlacement'];
 }
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;

package/esm/BarChart/useBarPlotData.js

@@ -55,8 +55,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0
+          xOrigin: Math.round(xScale(0) ?? 0),
+          yOrigin: Math.round(yScale(0) ?? 0)
         }, barDimensions, {
           color: colorGetter(dataIndex),
           value: series[seriesId].data[dataIndex],
@@ -92,6 +92,7 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       return {
         seriesId,
         barLabel: series[seriesId].barLabel,
+        barLabelPlacement: series[seriesId].barLabelPlacement,
         data: seriesDataPoints
       };
     });

package/esm/ChartsSurface/ChartsSurface.js

@@ -15,6 +15,7 @@ import { useStore } from "../internals/store/useStore.js";
 import { selectorChartPropsHeight, selectorChartPropsWidth, selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartsHasFocusedItem, selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useUtilityClasses } from "./chartsSurfaceClasses.js";
+import { selectorChartHasZoom } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -33,7 +34,7 @@ const ChartsSurfaceStyles = styled('svg', {
   overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
-  touchAction: 'pan-y',
+  touchAction: ownerState.hasZoom ? 'pan-y' : undefined,
   userSelect: 'none',
   gridArea: 'chart',
   '&:focus': {
@@ -74,6 +75,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   const propsHeight = useSelector(store, selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = useSelector(store, selectorChartsIsKeyboardNavigationEnabled);
   const hasFocusedItem = useSelector(store, selectorChartsHasFocusedItem);
+  const hasZoom = useSelector(store, selectorChartHasZoom);
   const svgRef = useSvgRef();
   const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
@@ -92,7 +94,8 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
     ownerState: {
       width: propsWidth,
-      height: propsHeight
+      height: propsHeight,
+      hasZoom
     },
     viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: clsx(classes.root, className),

package/esm/LineChart/seriesConfig/seriesProcessor.js

@@ -3,7 +3,6 @@ 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";
-// For now it's a copy past of bar charts formatter, but maybe will diverge later
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -32,6 +31,20 @@ const seriesProcessor = (params, dataset) => {
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!data && dataset) {
+        const dataKey = series[id].dataKey;
+        if (!dataKey) {
+          throw new Error([`MUI X Charts: line series with id='${id}' has no data and no dataKey.`, 'You must provide a dataKey when using the dataset prop.'].join('\n'));
+        }
+        dataset.forEach((entry, index) => {
+          const value = entry[dataKey];
+          if (value != null && typeof value !== 'number') {
+            warnOnce([`MUI X Charts: your dataset key "${dataKey}" is used for plotting lines, but the dataset contains the non-null non-numerical element "${value}" at index ${index}.`, 'Line plots only support numeric and null values.'].join('\n'));
+          }
+        });
+      }
+    }
   });
   const completedSeries = {};
   stackingGroups.forEach(stackingGroup => {
@@ -54,15 +67,7 @@ const seriesProcessor = (params, dataset) => {
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
-          if (typeof value !== 'number') {
-            if (process.env.NODE_ENV !== 'production') {
-              if (value !== null) {
-                warnOnce([`MUI X Charts: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
-              }
-            }
-            return null;
-          }
-          return value;
+          return typeof value === 'number' ? value : null;
         }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });

package/esm/PieChart/PieArcPlot.js

@@ -40,9 +40,11 @@ function PieArcPlot(props) {
     data
   });
   const {
-    dataIndex: focusedIndex = -1
+    dataIndex,
+    seriesId,
+    seriesType
   } = useFocusedItem() ?? {};
-  const focusedItem = focusedIndex !== -1 ? transformedData[focusedIndex] : null;
+  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
@@ -83,7 +85,7 @@ function PieArcPlot(props) {
       stroke: (theme.vars ?? theme).palette.text.primary,
       id: id,
       className: pieArcClasses.focusIndicator,
-      dataIndex: focusedIndex,
+      dataIndex: focusedItem.dataIndex,
       isFaded: false,
       isHighlighted: false,
       isFocused: false,

package/esm/hooks/animation/useAnimateBarLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BarLabelProps } from "../../BarChart/index.js";
-type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation'> & {
+type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation' | 'placement'> & {
   ref?: React.Ref<SVGTextElement>;
 };
 type UseAnimateBarLabelReturn = {

package/esm/hooks/animation/useAnimateBarLabel.js

@@ -5,14 +5,12 @@ function barLabelPropsInterpolator(from, to) {
   const interpolateY = interpolateNumber(from.y, to.y);
   const interpolateWidth = interpolateNumber(from.width, to.width);
   const interpolateHeight = interpolateNumber(from.height, to.height);
-  return t => {
-    return {
-      x: interpolateX(t),
-      y: interpolateY(t),
-      width: interpolateWidth(t),
-      height: interpolateHeight(t)
-    };
-  };
+  return t => ({
+    x: interpolateX(t),
+    y: interpolateY(t),
+    width: interpolateWidth(t),
+    height: interpolateHeight(t)
+  });
 }
 
 /**
@@ -25,15 +23,21 @@ function barLabelPropsInterpolator(from, to) {
  * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
  */
 export function useAnimateBarLabel(props) {
+  const {
+    initialX,
+    currentX,
+    initialY,
+    currentY
+  } = props.placement === 'outside' ? getOutsidePlacement(props) : getCenterPlacement(props);
   const initialProps = {
-    x: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
-    y: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    x: initialX,
+    y: initialY,
     width: props.width,
     height: props.height
   };
   const currentProps = {
-    x: props.x + props.width / 2,
-    y: props.y + props.height / 2,
+    x: currentX,
+    y: currentY,
     width: props.width,
     height: props.height
   };
@@ -50,4 +54,49 @@ export function useAnimateBarLabel(props) {
     skip: props.skipAnimation,
     ref: props.ref
   });
+}
+const LABEL_OFFSET = 4;
+function getCenterPlacement(props) {
+  return {
+    initialX: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
+    initialY: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    currentX: props.x + props.width / 2,
+    currentY: props.y + props.height / 2
+  };
+}
+function getOutsidePlacement(props) {
+  let initialY = 0;
+  let currentY = 0;
+  let initialX = 0;
+  let currentX = 0;
+  if (props.layout === 'vertical') {
+    const shouldPlaceAbove = props.y < props.yOrigin;
+    if (shouldPlaceAbove) {
+      initialY = props.yOrigin - LABEL_OFFSET;
+      currentY = props.y - LABEL_OFFSET;
+    } else {
+      initialY = props.yOrigin + LABEL_OFFSET;
+      currentY = props.y + props.height + LABEL_OFFSET;
+    }
+    return {
+      initialX: props.x + props.width / 2,
+      currentX: props.x + props.width / 2,
+      initialY,
+      currentY
+    };
+  }
+  const shouldPlaceToTheLeft = props.x < props.xOrigin;
+  if (shouldPlaceToTheLeft) {
+    initialX = props.xOrigin;
+    currentX = props.x - LABEL_OFFSET;
+  } else {
+    initialX = props.xOrigin;
+    currentX = props.x + props.width + LABEL_OFFSET;
+  }
+  return {
+    initialX,
+    currentX,
+    initialY: props.y + props.height / 2,
+    currentY: props.y + props.height / 2
+  };
 }

package/esm/hooks/useAxis.d.ts

@@ -2,12 +2,17 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
 /**
  * Get all the x-axes.
  *
- * - `xAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `xAxisIds` is an array of axis IDs.
+ * Returns all X axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
  *
- * If access to a specific X axis is needed, use the `useXAxis` hook instead.
+ * @returns An object containing:
+ *   - `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `xAxisIds`: An array of all X axis IDs in the chart
  *
- * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
+ * @example
+ * const { xAxis, xAxisIds } = useXAxes();
+ *
+ * @see `useXAxis` for accessing a single X axis
  */
 export declare function useXAxes(): {
   xAxis: import("../internals/index.js").ComputedAxisConfig<ChartsXAxisProps>;
@@ -16,36 +21,131 @@ export declare function useXAxes(): {
 /**
  * Get all the y-axes.
  *
- * - `yAxis` is an object with the shape `{ [axisId]: axis }`.
- * - `yAxisIds` is an array of axis IDs.
+ * Returns all Y axes configured in the chart along with their IDs.
+ * This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+ *
+ * @returns An object containing:
+ *   - `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `yAxisIds`: An array of all Y axis IDs in the chart
  *
- * If access to a specific Y axis is needed, use the `useYAxis` hook instead.
+ * @example
+ * const { yAxis, yAxisIds } = useYAxes();
  *
- * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
+ * @see `useYAxis` for accessing a single Y axis
  */
 export declare function useYAxes(): {
   yAxis: import("../internals/index.js").ComputedAxisConfig<ChartsYAxisProps>;
   yAxisIds: AxisId[];
 };
 /**
- * Get the X axis.
- * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
- * @returns The X axis.
+ * Get a specific X axis or the default X axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `xAxis` prop
+ *   - Undefined to get the default (first) X axis
+ * @returns The configuration for a single X axis.
+ *
+ * @example
+ * // Get the default X axis
+ * const xAxis = useXAxis();
+ *
+ * @example
+ * // Get a specific X axis by string ID
+ * const xAxis = useXAxis('revenue');
  */
 export declare function useXAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsXAxisProps>;
 /**
- * Get the Y axis.
- * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
- * @returns The Y axis.
+ * Get a specific Y axis or the default Y axis.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's `yAxis` prop
+ *   - Undefined to get the default (first) Y axis
+ * @returns The configuration for a single Y axis.
+ *
+ * @example
+ * // Get the default Y axis
+ * const yAxis = useYAxis();
+ *
+ * @example
+ * // Get a specific Y axis by string ID
+ * const yAxis = useYAxis('temperature');
  */
 export declare function useYAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsYAxisProps>;
+/**
+ * Get all the rotation axes for polar charts.
+ *
+ * Returns all rotation axes configured in polar charts along with their IDs.
+ * Rotation axes are used in charts like `RadarChart` to define angular positioning.
+ *
+ * @returns An object containing:
+ *   - `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `rotationAxisIds`: An array of all rotation axis IDs in the chart
+ *
+ * @example
+ * const { rotationAxis, rotationAxisIds } = useRotationAxes();
+ *
+ * @see `useRotationAxis` for accessing a single rotation axis
+ */
 export declare function useRotationAxes(): {
   rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];
 };
+/**
+ * Get all the radius axes for polar charts.
+ *
+ * Returns all radial axes configured in polar charts along with their IDs.
+ * Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+ *
+ * @returns An object containing:
+ *   - `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+ *   - `radiusAxisIds`: An array of all radius axis IDs in the chart
+ *
+ * @example
+ * const { radiusAxis, radiusAxisIds } = useRadiusAxes();
+ *
+ * @see `useRadiusAxis` for accessing a single radius axis
+ */
 export declare function useRadiusAxes(): {
   radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRadiusAxisProps>;
   radiusAxisIds: string[];
 };
-export declare function useRotationAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
-export declare function useRadiusAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;
+/**
+ * Get a specific rotation axis or the default rotation axis for polar charts.
+ *
+ * Returns the configuration and scale for a rotation axis in polar charts.
+ * The rotation axis controls the angular positioning of data points around the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's rotation axis configuration
+ *   - Undefined to get the default (first) rotation axis
+ * @returns The rotation axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default rotation axis
+ * const rotationAxis = useRotationAxis();
+ *
+ * @example
+ * // Get a specific rotation axis by string ID
+ * const rotationAxis = useRotationAxis('categories');
+ */
+export declare function useRotationAxis(axisId?: AxisId): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
+/**
+ * Get a specific radius axis or the default radius axis for polar charts.
+ *
+ * Returns the configuration and scale for a radial axis in polar charts.
+ * The radius axis controls the radial distance of data points from the center of the circle.
+ *
+ * @param {AxisId} [axisId] - The axis identifier. Can be:
+ *   - A string or number matching the axis ID defined in the chart's radius axis configuration
+ *   - Undefined to get the default (first) radius axis
+ * @returns The radius axis configuration, or undefined if not found
+ *
+ * @example
+ * // Get the default radius axis
+ * const radiusAxis = useRadiusAxis();
+ *
+ * @example
+ * // Get a specific radius axis by string ID
+ * const radiusAxis = useRadiusAxis('magnitude');
+ */
+export declare function useRadiusAxis(axisId?: AxisId): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;