@mui/x-charts 9.11.1 → 9.13.0

package/ChartsYAxis/shortenLabels.js

@@ -11,34 +11,24 @@ var _domUtils = require("../internals/domUtils");
 function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
   const shortenedLabels = new Map();
   const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
-  let topBoundFactor = 1;
-  let bottomBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    topBoundFactor = Infinity;
-    bottomBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    topBoundFactor = 1;
-    bottomBoundFactor = Infinity;
-  } else {
-    topBoundFactor = 2;
-    bottomBoundFactor = 2;
-  }
-  if (angle > 180) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  if (isRtl) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
+  const boundsConfig = {
+    angle,
+    textAnchor: tickLabelStyle?.textAnchor,
+    dominantBaseline: tickLabelStyle?.dominantBaseline,
+    isRtl
+  };
+  const svgHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
   for (const item of visibleLabels) {
     if (item.formattedValue) {
-      // That maximum height of the tick depends on its proximity to the axis bounds.
-      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
-      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
-      });
+      // The label is anchored on the tick, so how far it can extend vertically depends on the
+      // proximity of the tick to the SVG bounds.
+      const anchor = item.offset + item.labelOffset;
+      const spaceAbove = anchor;
+      const spaceBelow = svgHeight - anchor;
+      const doesTextFit = text => {
+        const bounds = (0, _ellipsize.getRotatedTextBounds)((0, _domUtils.getStringSize)(text, tickLabelStyle), boundsConfig);
+        return bounds.width <= maxWidth && bounds.above <= spaceAbove && bounds.below <= spaceBelow;
+      };
       shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
     }
   }

package/ChartsYAxis/shortenLabels.mjs

@@ -1,39 +1,29 @@
 'use client';
 
 import { clampAngle } from "../internals/clampAngle.mjs";
-import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.mjs";
+import { ellipsize, getRotatedTextBounds } from "../internals/ellipsize.mjs";
 import { getStringSize } from "../internals/domUtils.mjs";
 export function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
   const shortenedLabels = new Map();
   const angle = clampAngle(tickLabelStyle?.angle ?? 0);
-  let topBoundFactor = 1;
-  let bottomBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    topBoundFactor = Infinity;
-    bottomBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    topBoundFactor = 1;
-    bottomBoundFactor = Infinity;
-  } else {
-    topBoundFactor = 2;
-    bottomBoundFactor = 2;
-  }
-  if (angle > 180) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
-  if (isRtl) {
-    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
-  }
+  const boundsConfig = {
+    angle,
+    textAnchor: tickLabelStyle?.textAnchor,
+    dominantBaseline: tickLabelStyle?.dominantBaseline,
+    isRtl
+  };
+  const svgHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
   for (const item of visibleLabels) {
     if (item.formattedValue) {
-      // That maximum height of the tick depends on its proximity to the axis bounds.
-      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
-      const doesTextFit = text => doesTextFitInRect(text, {
-        width: maxWidth,
-        height,
-        angle,
-        measureText: string => getStringSize(string, tickLabelStyle)
-      });
+      // The label is anchored on the tick, so how far it can extend vertically depends on the
+      // proximity of the tick to the SVG bounds.
+      const anchor = item.offset + item.labelOffset;
+      const spaceAbove = anchor;
+      const spaceBelow = svgHeight - anchor;
+      const doesTextFit = text => {
+        const bounds = getRotatedTextBounds(getStringSize(text, tickLabelStyle), boundsConfig);
+        return bounds.width <= maxWidth && bounds.above <= spaceAbove && bounds.below <= spaceBelow;
+      };
       shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
     }
   }

package/ChartsYAxis/useAxisTicksProps.js

@@ -16,6 +16,7 @@ var _useAxis = require("../hooks/useAxis");
 var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
 var _invertTextAnchor = require("../internals/invertTextAnchor");
 var _utilities = require("./utilities");
+var _constants = require("../constants");
 const _excluded = ["scale", "tickNumber", "reverse"];
 function useAxisTicksProps(inProps) {
   const {
@@ -45,7 +46,7 @@ function useAxisTicksProps(inProps) {
   const isRtl = (0, _RtlProvider.useRtl)();
   const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
   const positionSign = position === 'right' ? 1 : -1;
-  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : _constants.DEFAULT_TICK_LABEL_FONT_SIZE;
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const defaultTextAnchor = (0, _defaultTextPlacement.getDefaultTextAnchor)((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));

package/ChartsYAxis/useAxisTicksProps.mjs

@@ -11,6 +11,7 @@ import { useYAxes } from "../hooks/useAxis.mjs";
 import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.mjs";
 import { invertTextAnchor } from "../internals/invertTextAnchor.mjs";
 import { defaultProps, useUtilityClasses } from "./utilities.mjs";
+import { DEFAULT_TICK_LABEL_FONT_SIZE } from "../constants/index.mjs";
 export function useAxisTicksProps(inProps) {
   const {
     yAxis,
@@ -39,7 +40,7 @@ export function useAxisTicksProps(inProps) {
   const isRtl = useRtl();
   const classes = useUtilityClasses(defaultizedProps);
   const positionSign = position === 'right' ? 1 : -1;
-  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : DEFAULT_TICK_LABEL_FONT_SIZE;
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const defaultTextAnchor = getDefaultTextAnchor((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));

package/LineChart/CircleMarkElement.js

@@ -102,10 +102,6 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
    */
   dataIndex: _propTypes.default.number.isRequired,
   seriesId: _propTypes.default.string.isRequired,
-  /**
-   * The shape of the marker.
-   */
-  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/LineChart/CircleMarkElement.mjs

@@ -95,10 +95,6 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
    */
   dataIndex: PropTypes.number.isRequired,
   seriesId: PropTypes.string.isRequired,
-  /**
-   * The shape of the marker.
-   */
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/LineChart/LineChart.js

@@ -148,6 +148,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
     enablePositionBasedPointerInteraction: _propTypes.default.bool,
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -275,7 +282,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,

package/LineChart/LineChart.mjs

@@ -141,6 +141,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
     enablePositionBasedPointerInteraction: PropTypes.bool,
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -268,7 +275,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/LineChart/MarkElement.js

@@ -18,6 +18,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
 var _useStore = require("../internals/store/useStore");
 var _getSymbol = require("../internals/getSymbol");
+var _useAnimateMark = require("../hooks/animation/useAnimateMark");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "seriesId", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
@@ -30,7 +31,8 @@ const MarkElementPath = (0, _styles.styled)('path', {
   fill: (theme.vars || theme).palette.background.paper,
   [`&.${_lineClasses.lineClasses.markAnimate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'transform, transform-origin, opacity',
+    // The position is animated in JS by `useAnimateMark`: Safari cannot transition the `transform` attribute.
+    transitionProperty: 'opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 }));
@@ -79,11 +81,16 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
-    style: (0, _extends2.default)({}, style, {
-      transform: `translate(${x}px, ${y}px)`,
-      transformOrigin: `${x}px ${y}px`
-    }),
+
+  // Positions the mark with the `transform` attribute, in `viewBox` units. A CSS `px` transform lands in the wrong
+  // place in Safari under browser zoom, see https://github.com/mui/mui-x/issues/23377
+  const animatedProps = (0, _useAnimateMark.useAnimateMark)({
+    x: Number(x),
+    y: Number(y),
+    skipAnimation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, animatedProps, {
+    style: style,
     ownerState: ownerState,
     className: classes.mark,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),

package/LineChart/MarkElement.mjs

@@ -12,6 +12,7 @@ import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
 import { selectorChartExperimentalFeaturesState } from "../internals/plugins/corePlugins/useChartExperimentalFeature/index.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { getSymbol } from "../internals/getSymbol.mjs";
+import { useAnimateMark } from "../hooks/animation/useAnimateMark.mjs";
 import { lineClasses, useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
@@ -23,7 +24,8 @@ const MarkElementPath = styled('path', {
   fill: (theme.vars || theme).palette.background.paper,
   [`&.${lineClasses.markAnimate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'transform, transform-origin, opacity',
+    // The position is animated in JS by `useAnimateMark`: Safari cannot transition the `transform` attribute.
+    transitionProperty: 'opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 }));
@@ -72,11 +74,16 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
-    style: _extends({}, style, {
-      transform: `translate(${x}px, ${y}px)`,
-      transformOrigin: `${x}px ${y}px`
-    }),
+
+  // Positions the mark with the `transform` attribute, in `viewBox` units. A CSS `px` transform lands in the wrong
+  // place in Safari under browser zoom, see https://github.com/mui/mui-x/issues/23377
+  const animatedProps = useAnimateMark({
+    x: Number(x),
+    y: Number(y),
+    skipAnimation
+  });
+  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, animatedProps, {
+    style: style,
     ownerState: ownerState,
     className: classes.mark,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),

package/PieChart/PieChart.js

@@ -143,6 +143,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
   experimentalFeatures: _propTypes.default.shape({
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/PieChart/PieChart.mjs

@@ -136,6 +136,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
   experimentalFeatures: PropTypes.shape({
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/RadarChart/RadarChart.js

@@ -105,6 +105,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   experimentalFeatures: _propTypes.default.shape({
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -224,7 +231,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,

package/RadarChart/RadarChart.mjs

@@ -98,6 +98,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   experimentalFeatures: PropTypes.shape({
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -217,7 +224,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
+var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRegisterRadarItemActivation = require("./useRegisterRadarItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick", "classes"];
@@ -54,6 +55,9 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
   const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
+  // Clickable marks cover the area, so they report the series the same way it does. The index
+  // still comes from the rotation axis, which is why the identifier stays series-level.
+  const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   (0, _useRegisterRadarItemActivation.useRegisterRadarItemActivation)(seriesId, onItemClick, _useRegisterRadarItemActivation.RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -62,7 +66,7 @@ function RadarSeriesMarks(props) {
       hideMark,
       fillArea,
       hidden
-    }) => {
+    }, seriesIndex) => {
       if (hideMark || hidden) {
         return null;
       }
@@ -83,7 +87,7 @@ function RadarSeriesMarks(props) {
             dataIndex: index
           }),
           cursor: onItemClick ? 'pointer' : 'unset'
-        }, other), index))
+        }, interactionProps[seriesIndex], other), index))
       }, id);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
+import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
 import { RADAR_ACTIVATION_PRIORITY, useRegisterRadarItemActivation } from "./useRegisterRadarItemActivation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
@@ -45,6 +46,9 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
   const classes = useUtilityClasses(inClasses);
   const getHighlightState = useItemHighlightStateGetter();
+  // Clickable marks cover the area, so they report the series the same way it does. The index
+  // still comes from the rotation axis, which is why the identifier stays series-level.
+  const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   useRegisterRadarItemActivation(seriesId, onItemClick, RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -53,7 +57,7 @@ function RadarSeriesMarks(props) {
       hideMark,
       fillArea,
       hidden
-    }) => {
+    }, seriesIndex) => {
       if (hideMark || hidden) {
         return null;
       }
@@ -74,7 +78,7 @@ function RadarSeriesMarks(props) {
             dataIndex: index
           }),
           cursor: onItemClick ? 'pointer' : 'unset'
-        }, other), index))
+        }, interactionProps[seriesIndex], other), index))
       }, id);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -66,13 +66,14 @@ function RadarSeriesPlot(props) {
           getHighlightState,
           classes
         }), {
+          pointerEvents: onMarkClick ? undefined : 'none',
           onClick: event => onMarkClick?.(event, {
             type: 'radar',
             seriesId,
             dataIndex: index
           }),
           cursor: onMarkClick ? 'pointer' : 'unset'
-        }), index))]
+        }, interactionProps[seriesIndex]), index))]
       }, seriesId);
     })
   });

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -59,13 +59,14 @@ function RadarSeriesPlot(props) {
           getHighlightState,
           classes
         }), {
+          pointerEvents: onMarkClick ? undefined : 'none',
           onClick: event => onMarkClick?.(event, {
             type: 'radar',
             seriesId,
             dataIndex: index
           }),
           cursor: onMarkClick ? 'pointer' : 'unset'
-        }), index))]
+        }, interactionProps[seriesIndex]), index))]
       }, seriesId);
     })
   });

package/RadarChart/useRadarChartProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _RadarChart = require("./RadarChart.plugins");
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "focusItemOnClick", "experimentalFeatures", "className"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -41,6 +41,7 @@ const useRadarChartProps = props => {
       onAreaClick,
       onMarkClick,
       disableKeyboardNavigation,
+      focusItemOnClick,
       experimentalFeatures,
       className
     } = props,
@@ -59,6 +60,7 @@ const useRadarChartProps = props => {
     skipAnimation,
     onAxisClick,
     disableKeyboardNavigation,
+    focusItemOnClick,
     experimentalFeatures,
     plugins: _RadarChart.RADAR_PLUGINS
   };

package/RadarChart/useRadarChartProps.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "focusItemOnClick", "experimentalFeatures", "className"];
 import { RADAR_PLUGINS } from "./RadarChart.plugins.mjs";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -35,6 +35,7 @@ export const useRadarChartProps = props => {
       onAreaClick,
       onMarkClick,
       disableKeyboardNavigation,
+      focusItemOnClick,
       experimentalFeatures,
       className
     } = props,
@@ -53,6 +54,7 @@ export const useRadarChartProps = props => {
     skipAnimation,
     onAxisClick,
     disableKeyboardNavigation,
+    focusItemOnClick,
     experimentalFeatures,
     plugins: RADAR_PLUGINS
   };

package/ScatterChart/ScatterChart.js

@@ -152,6 +152,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
     keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -273,7 +280,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,

package/ScatterChart/ScatterChart.mjs

@@ -145,6 +145,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
     keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -266,7 +273,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/SparkLineChart/SparkLineChart.js

@@ -259,6 +259,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
     keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -453,7 +460,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,

package/SparkLineChart/SparkLineChart.mjs

@@ -252,6 +252,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
     keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -446,7 +453,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,

package/constants/index.d.mts

@@ -10,4 +10,6 @@ export declare const DEFAULT_MARGINS: {
 };
 export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;
+/** Font size the axes render their tick labels with, unless `tickLabelStyle` overrides it. */
+export declare const DEFAULT_TICK_LABEL_FONT_SIZE = 12;