@mui/x-charts 8.5.0 → 8.5.2

package/esm/RadarChart/index.d.ts

@@ -2,7 +2,7 @@ export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
 export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
-export type { RadarChartProps } from "./RadarChart.js";
+export type { RadarChartProps, RadarChartSlots, RadarChartSlotProps } from "./RadarChart.js";
 export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";

package/esm/ScatterChart/ScatterChart.js

@@ -16,7 +16,6 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
-import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -49,10 +48,10 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))

package/esm/Toolbar/Toolbar.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-export interface ChartsToolbarProps extends React.ComponentProps<'div'> {
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export interface ToolbarProps extends React.ComponentProps<'div'> {
   className?: string;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 }
-export declare function Toolbar({
-  className,
-  ...other
-}: ChartsToolbarProps): React.JSX.Element;
-export declare namespace Toolbar {
-  var propTypes: any;
-}
+export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/esm/Toolbar/Toolbar.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
 import { chartsToolbarClasses } from "./chartToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ToolbarRoot = styled('div', {
@@ -19,24 +21,38 @@ const ToolbarRoot = styled('div', {
   justifyContent: 'end',
   gap: theme.spacing(0.25),
   padding: theme.spacing(0.5),
+  marginBottom: theme.spacing(1.5),
   minHeight: 44,
   boxSizing: 'border-box',
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: 4
 }));
-export function Toolbar(_ref) {
+export const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
   let {
-      className
+      className,
+      render
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsx(ToolbarRoot, _extends({
+  const element = useComponentRenderer(ToolbarRoot, render, _extends({
+    role: 'toolbar',
+    'aria-orientation': 'horizontal',
     className: clsx(chartsToolbarClasses.root, className)
-  }, other));
-}
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(ToolbarContextProvider, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") Toolbar.displayName = "Toolbar";
 process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  className: PropTypes.string
+  className: PropTypes.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;

package/esm/Toolbar/Toolbar.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartsToolbarProps } from "./Toolbar.js";
+export interface ChartsToolbarProps {}
 export interface ChartsToolbarSlots {
   /**
    * Custom component for the toolbar.

package/esm/Toolbar/ToolbarButton.js

@@ -1,9 +1,14 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render"];
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import useForkRef from '@mui/utils/useForkRef';
+import { useRegisterToolbarButton } from '@mui/x-internals/ToolbarContext';
 import { useChartsSlots } from "../context/ChartsSlotsContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
@@ -15,8 +20,17 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props
     slots,
     slotProps
   } = useChartsSlots();
-  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, other, {
-    ref
+  const buttonRef = React.useRef(null);
+  const handleRef = useForkRef(buttonRef, ref);
+  const _useRegisterToolbarBu = useRegisterToolbarButton(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = _objectWithoutPropertiesLoose(_useRegisterToolbarBu, _excluded2);
+  const element = useComponentRenderer(slots.baseIconButton, render, _extends({}, slotProps?.baseIconButton, {
+    tabIndex
+  }, other, toolbarButtonProps, {
+    ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: element
@@ -34,6 +48,7 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
    * A function to customize the rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  style: PropTypes.object
+  style: PropTypes.object,
+  tabIndex: PropTypes.number
 } : void 0;
 export { ToolbarButton };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.0
+ * @mui/x-charts v8.5.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/AxisSharedComponents.d.ts

@@ -1 +1 @@
-export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/esm/internals/components/ChartsWrapper/ChartsWrapper.d.ts

@@ -5,6 +5,11 @@ import { Position } from "../../../models/index.js";
 export interface ChartsWrapperProps {
   legendPosition?: Position;
   legendDirection?: Direction;
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically?: boolean;
   children: React.ReactNode;
   sx?: SxProps<Theme>;
 }

package/esm/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { useChartRootRef } from "../../../hooks/useChartRootRef.js";
+import { useStore } from "../../store/useStore.js";
+import { useSelector } from "../../store/useSelector.js";
+import { selectorChartPropsSize } from "../../plugins/corePlugins/useChartDimensions/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -35,7 +39,8 @@ const getAlign = (direction, position) => {
 };
 const Root = styled('div', {
   name: 'MuiChartsWrapper',
-  slot: 'Root'
+  slot: 'Root',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'extendVertically'
 })(({
   ownerState
 }) => ({
@@ -43,7 +48,15 @@ const Root = styled('div', {
   flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
   flex: 1,
   justifyContent: 'center',
-  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition),
+  variants: [{
+    props: {
+      extendVertically: true
+    },
+    style: {
+      height: '100%'
+    }
+  }]
 }));
 
 /**
@@ -55,13 +68,19 @@ const Root = styled('div', {
 function ChartsWrapper(props) {
   const {
     children,
-    sx
+    sx,
+    extendVertically
   } = props;
   const chartRootRef = useChartRootRef();
+  const store = useStore();
+  const {
+    height: propsHeight
+  } = useSelector(store, selectorChartPropsSize);
   return /*#__PURE__*/_jsx(Root, {
     ref: chartRootRef,
     ownerState: props,
     sx: sx,
+    extendVertically: extendVertically ?? propsHeight === undefined,
     children: children
   });
 }

package/esm/internals/constants.d.ts

@@ -3,4 +3,11 @@ import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCar
 export declare const ZOOM_SLIDER_MARGIN = 4;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
-export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
+export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
+/** Default margin for pie charts. */
+export declare const DEFAULT_PIE_CHART_MARGIN: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};

package/esm/internals/constants.js

@@ -3,4 +3,12 @@ export const ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
-export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
+export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
+
+/** Default margin for pie charts. */
+export const DEFAULT_PIE_CHART_MARGIN = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 5
+};

package/esm/internals/defaultValueFormatters.d.ts

@@ -0,0 +1,6 @@
+import { AxisValueFormatterContext, ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
+/**
+ * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
+ * @returns A formatter function for continuous values.
+ */
+export declare function createScalarFormatter(tickNumber: number, zoomScale: D3ContinuousScale): <S extends ContinuousScaleName = ContinuousScaleName>(value: any, context: AxisValueFormatterContext<S>) => string;

package/esm/internals/defaultValueFormatters.js

@@ -0,0 +1,15 @@
+/**
+ * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
+ * @returns A formatter function for continuous values.
+ */
+export function createScalarFormatter(tickNumber, zoomScale) {
+  return function defaultScalarValueFormatter(value, context) {
+    if (context.location === 'tick') {
+      return context.scale.tickFormat(tickNumber)(value);
+    }
+    if (context.location === 'zoom-slider-tooltip') {
+      return zoomScale.tickFormat(2)(value);
+    }
+    return `${value}`;
+  };
+}

package/esm/internals/index.d.ts

@@ -21,6 +21,8 @@ export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
 export * from "./plugins/utils/selectors.js";
+export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
+export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
 export * from "./store/useSelector.js";
@@ -28,6 +30,7 @@ export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
 export * from "../RadarChart/RadarChart.plugins.js";
+export * from "../PieChart/PieChart.plugins.js";
 export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
@@ -39,7 +42,11 @@ export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
+export * from "./colorScale.js";
+export * from "./ticks.js";
 export * from "./dateHelpers.js";
+export * from "./invertScale.js";
+export * from "./isBandScale.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/esm/internals/index.js

@@ -26,6 +26,8 @@ export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
 export * from "./plugins/utils/selectors.js";
+export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
+export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
 export * from "./store/useSelector.js";
@@ -36,6 +38,7 @@ export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
 export * from "../RadarChart/RadarChart.plugins.js";
+export * from "../PieChart/PieChart.plugins.js";
 
 // utils
 export * from "./defaultizeValueFormatter.js";
@@ -49,7 +52,11 @@ export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
+export * from "./colorScale.js";
+export * from "./ticks.js";
 export * from "./dateHelpers.js";
+export * from "./invertScale.js";
+export * from "./isBandScale.js";
 
 // contexts
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";

package/esm/internals/invertScale.d.ts

@@ -0,0 +1,2 @@
+import { D3Scale } from "../models/axis.js";
+export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;

package/esm/internals/invertScale.js

@@ -0,0 +1,8 @@
+import { isBandScale } from "./isBandScale.js";
+export function invertScale(scale, data, value) {
+  if (isBandScale(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return data[dataIndex];
+  }
+  return scale.invert(value);
+}

package/esm/internals/material/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
 const baseSlots = {
+  baseButton: Button,
   baseIconButton: IconButton
 };
 const iconSlots = {};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
+import { createScalarFormatter } from "../../../defaultValueFormatters.js";
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
 import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
@@ -123,7 +124,8 @@ export function computeAxisValue({
       scaleType: scaleType,
       scale: finalScale.domain(domain),
       tickNumber,
-      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+      colorScale: axis.colorMap && getColorScale(axis.colorMap),
+      valueFormatter: axis.valueFormatter ?? createScalarFormatter(tickNumber, getScale(scaleType, range.map(v => scale.invert(v)), range))
     });
   });
   return {