@mui/x-charts 8.10.0 → 8.10.2

package/esm/ChartsYAxis/useAxisProps.js

@@ -0,0 +1,108 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["scale", "tickNumber", "reverse"];
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useThemeProps, useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { ChartsText } from "../ChartsText/index.js";
+import { useYAxes } from "../hooks/useAxis.js";
+import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.js";
+import { invertTextAnchor } from "../internals/invertTextAnchor.js";
+import { defaultProps, useUtilityClasses } from "./utilities.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { isInfinity } from "../internals/isInfinity.js";
+export const useAxisProps = inProps => {
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
+    {
+      scale: yScale,
+      tickNumber,
+      reverse
+    } = _yAxis,
+    settings = _objectWithoutPropertiesLoose(_yAxis, _excluded);
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = useThemeProps({
+    props: _extends({}, settings, inProps),
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  const {
+    position,
+    tickLabelStyle,
+    labelStyle,
+    slots,
+    slotProps
+  } = defaultizedProps;
+  const theme = useTheme();
+  const isRtl = useRtl();
+  const classes = useUtilityClasses(defaultizedProps);
+  const positionSign = position === 'right' ? 1 : -1;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? ChartsText;
+  const Label = slots?.axisLabel ?? ChartsText;
+  const defaultTextAnchor = getDefaultTextAnchor((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
+  const defaultDominantBaseline = getDefaultBaseline((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
+  const axisTickLabelProps = useSlotProps({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: _extends({}, theme.typography.caption, {
+        fontSize: tickFontSize,
+        textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline
+      }, tickLabelStyle)
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
+  const axisLabelProps = useSlotProps({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: _extends({}, theme.typography.body1, {
+        lineHeight: 1,
+        fontSize: 14,
+        angle: positionSign * 90,
+        textAnchor: 'middle',
+        dominantBaseline: 'text-before-edge'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
+  const lineProps = useSlotProps({
+    elementType: Line,
+    externalSlotProps: slotProps?.axisLine,
+    additionalProps: {
+      strokeLinecap: 'square'
+    },
+    ownerState: {}
+  });
+  const domain = yScale.domain();
+  const isScaleBand = isBandScale(yScale);
+  const skipAxisRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(isInfinity) || position === 'none';
+  return {
+    yScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    lineProps,
+    reverse,
+    isRtl
+  };
+};

package/esm/ChartsYAxis/utilities.d.ts

@@ -0,0 +1,10 @@
+import { AxisConfig, ChartsYAxisProps } from "../models/axis.js";
+export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsYAxisProps>) => Record<"line" | "root" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+export declare const TICK_LABEL_GAP = 2;
+export declare const AXIS_LABEL_TICK_LABEL_GAP = 2;
+export declare const YAxisRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, keyof import("react").SVGProps<SVGGElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const defaultProps: {
+  disableLine: boolean;
+  disableTicks: boolean;
+  tickSize: number;
+};

package/esm/ChartsYAxis/utilities.js

@@ -0,0 +1,34 @@
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    position,
+    id
+  } = ownerState;
+  const slots = {
+    root: ['root', 'directionY', position, `id-${id}`],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel'],
+    label: ['label']
+  };
+  return composeClasses(slots, getAxisUtilityClass, classes);
+};
+
+/* Gap between a tick and its label. */
+export const TICK_LABEL_GAP = 2;
+/* Gap between the axis label and tick labels. */
+export const AXIS_LABEL_TICK_LABEL_GAP = 2;
+export const YAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsYAxis',
+  slot: 'Root'
+})({});
+export const defaultProps = {
+  disableLine: false,
+  disableTicks: false,
+  tickSize: 6
+};

package/esm/LineChart/LineChart.js

@@ -272,6 +272,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     height: PropTypes.number,
@@ -327,6 +328,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     height: PropTypes.number,
@@ -713,6 +715,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     hideTooltip: PropTypes.bool,
@@ -767,6 +770,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     hideTooltip: PropTypes.bool,

package/esm/ScatterChart/ScatterChart.js

@@ -241,6 +241,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     height: PropTypes.number,
@@ -296,6 +297,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     height: PropTypes.number,
@@ -682,6 +684,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     hideTooltip: PropTypes.bool,
@@ -736,6 +739,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     hideTooltip: PropTypes.bool,

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
@@ -29,7 +29,7 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
    * Type of plot used.
    * @default 'line'
    */
-  plotType?: 'line' | 'bar';
+  plotType?: PlotType;
   /**
    * Data to plot.
    */
@@ -58,11 +58,21 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
    * Has no effect if plotType='bar'.
    * @default false
    */
-  area?: LineSeriesType['area'];
+  area?: PlotType extends 'line' ? LineSeriesType['area'] : never;
   /**
    * @default 'linear'
    */
-  curve?: LineSeriesType['curve'];
+  curve?: PlotType extends 'line' ? LineSeriesType['curve'] : never;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   *
+   * @default 0
+   */
+  baseline?: PlotType extends 'line' ? LineSeriesType['baseline'] : never;
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -115,5 +125,5 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
  *
  * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
  */
-declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<SVGSVGElement>>;
 export { SparkLineChart };

package/esm/SparkLineChart/SparkLineChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className", "disableClipping", "clipAreaOffset"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "baseline", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className", "disableClipping", "clipAreaOffset", "onHighlightChange", "onHighlightedAxisChange", "highlightedAxis", "highlightedItem"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
@@ -28,12 +28,13 @@ const SPARK_LINE_DEFAULT_MARGIN = 5;
  */
 const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
-      xAxis,
-      yAxis,
+      xAxis: xAxisProps,
+      yAxis: yAxisProps,
       width,
       height,
       margin = SPARK_LINE_DEFAULT_MARGIN,
       color,
+      baseline,
       sx,
       showTooltip,
       showHighlight,
@@ -48,23 +49,27 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       curve = 'linear',
       className,
       disableClipping,
-      clipAreaOffset
+      clipAreaOffset,
+      onHighlightChange,
+      onHighlightedAxisChange,
+      highlightedAxis,
+      highlightedItem
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
-  const clipPathOffset = {
+  const clipPathOffset = React.useMemo(() => ({
     top: clipAreaOffset?.top ?? 1,
     right: clipAreaOffset?.right ?? 1,
     bottom: clipAreaOffset?.bottom ?? 1,
     left: clipAreaOffset?.left ?? 1
-  };
-  const defaultXHighlight = showHighlight && plotType === 'bar' ? {
+  }), [clipAreaOffset?.bottom, clipAreaOffset?.left, clipAreaOffset?.right, clipAreaOffset?.top]);
+  const defaultXHighlight = React.useMemo(() => showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
     x: 'none'
-  };
-  const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
+  }, [plotType, showHighlight]);
+  const axisHighlight = React.useMemo(() => _extends({}, defaultXHighlight, inAxisHighlight), [defaultXHighlight, inAxisHighlight]);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const colors = React.useMemo(() => {
     if (color == null) {
@@ -72,36 +77,44 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     }
     return typeof color === 'function' ? mode => [color(mode)] : [color];
   }, [color]);
+  const series = React.useMemo(() => [_extends({
+    type: plotType,
+    data,
+    valueFormatter
+  }, plotType === 'bar' ? {} : {
+    area,
+    curve,
+    baseline,
+    disableHighlight: !showHighlight
+  })], [area, baseline, curve, data, plotType, showHighlight, valueFormatter]);
+  const xAxis = React.useMemo(() => [_extends({
+    id: DEFAULT_X_AXIS_KEY,
+    scaleType: plotType === 'bar' ? 'band' : 'point',
+    hideTooltip: xAxisProps === undefined
+  }, xAxisProps, {
+    data: xAxisProps?.data ?? Array.from({
+      length: data.length
+    }, (_, index) => index),
+    position: 'none'
+  })], [data.length, plotType, xAxisProps]);
+  const yAxis = React.useMemo(() => [_extends({
+    id: DEFAULT_Y_AXIS_KEY
+  }, yAxisProps, {
+    position: 'none'
+  })], [yAxisProps]);
   return /*#__PURE__*/_jsxs(ChartDataProvider, {
-    series: [_extends({
-      type: plotType,
-      data,
-      valueFormatter
-    }, plotType === 'bar' ? {} : {
-      area,
-      curve,
-      disableHighlight: !showHighlight
-    })],
+    series: series,
     width: width,
     height: height,
     margin: margin,
-    xAxis: [_extends({
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'point',
-      data: Array.from({
-        length: data.length
-      }, (_, index) => index),
-      hideTooltip: xAxis === undefined
-    }, xAxis, {
-      position: 'none'
-    })],
-    yAxis: [_extends({
-      id: DEFAULT_Y_AXIS_KEY
-    }, yAxis, {
-      position: 'none'
-    })],
+    xAxis: xAxis,
+    yAxis: yAxis,
     colors: colors,
-    disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    disableAxisListener: onHighlightedAxisChange === undefined && (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    onHighlightChange: onHighlightChange,
+    onHighlightedAxisChange: onHighlightedAxisChange,
+    highlightedAxis: highlightedAxis,
+    highlightedItem: highlightedItem,
     children: [/*#__PURE__*/_jsxs(ChartsSurface, _extends({
       className: className,
       ref: ref,
@@ -153,6 +166,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   *
+   * @default 0
+   */
+  baseline: PropTypes.oneOfType([PropTypes.oneOf(['max', 'min']), PropTypes.number]),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -355,6 +378,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     height: PropTypes.number,
@@ -410,6 +434,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     height: PropTypes.number,
@@ -795,6 +820,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     hideTooltip: PropTypes.bool,
@@ -849,6 +875,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: PropTypes.string,
     groups: PropTypes.arrayOf(PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
     hideTooltip: PropTypes.bool,

package/esm/index.js

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

package/esm/internals/animation/Transition.js

@@ -10,6 +10,8 @@ import { timer, now, timeout, timerFlush } from '@mui/x-charts-vendor/d3-timer';
  * stopped.
  */
 export class Transition {
+  elapsed = 0;
+  timer = null;
   /**
    * Create a new ResumableTransition.
    * @param duration Duration in milliseconds
@@ -17,11 +19,6 @@ export class Transition {
    * @param onTick Callback function called on each animation frame with the eased time in range [0, 1].
    */
   constructor(duration, easingFn, onTick) {
-    this.duration = void 0;
-    this.elapsed = 0;
-    this.easingFn = void 0;
-    this.timer = null;
-    this.onTickCallback = void 0;
     this.duration = duration;
     this.easingFn = easingFn;
     this.onTickCallback = onTick;

package/esm/internals/configInit.js

@@ -1,8 +1,8 @@
 let cartesianInstance;
 let polarInstance;
 class CartesianSeriesTypes {
+  types = (() => new Set())();
   constructor() {
-    this.types = new Set();
     if (cartesianInstance) {
       throw new Error('You can only create one instance!');
     }
@@ -16,8 +16,8 @@ class CartesianSeriesTypes {
   }
 }
 class PolarSeriesTypes {
+  types = (() => new Set())();
   constructor() {
-    this.types = new Set();
     if (polarInstance) {
       throw new Error('You can only create one instance!');
     }

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -8,4 +8,4 @@ export declare function getAxisIndex(axisConfig: ComputedAxis, pointerValue: num
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number): number | Date | null;
+export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number | null): number | Date | null;

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

@@ -52,13 +52,12 @@ export function getAxisValue(axisConfig, pointerValue, dataIndex) {
     data: axisData
   } = axisConfig;
   if (!isBandScale(scale)) {
-    const value = scale.invert(pointerValue);
-    if (dataIndex < 0) {
-      return value;
+    if (dataIndex === null) {
+      return scale.invert(pointerValue);
     }
     return axisData[dataIndex];
   }
-  if (dataIndex < 0 || dataIndex >= axisData.length) {
+  if (dataIndex === null || dataIndex < 0 || dataIndex >= axisData.length) {
     return null;
   }
   return axisData[dataIndex];

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -37,13 +37,13 @@ function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
   return Array.isArray(ids) ? ids.map((id, axisIndex) => getAxisValue(axes.axis[id], value, indexes[axisIndex])) : getAxisValue(axes.axis[ids], value, indexes);
 }
 export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
-  if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
+  if (x === null || xAxes.axisIds.length === 0) {
     return null;
   }
   return valueGetter(x, xAxes, xIndex, id);
 });
 export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
-  if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
+  if (y === null || yAxes.axisIds.length === 0) {
     return null;
   }
   return valueGetter(y, yAxes, yIndex, id);

package/esm/internals/plugins/utils/ChartStore.js

@@ -1,24 +1,22 @@
 export class ChartStore {
   constructor(value) {
-    this.value = void 0;
-    this.listeners = void 0;
-    this.subscribe = fn => {
-      this.listeners.add(fn);
-      return () => {
-        this.listeners.delete(fn);
-      };
-    };
-    this.getSnapshot = () => {
-      return this.value;
-    };
-    this.update = updater => {
-      const newState = updater(this.value);
-      if (newState !== this.value) {
-        this.value = newState;
-        this.listeners.forEach(l => l(newState));
-      }
-    };
     this.value = value;
     this.listeners = new Set();
   }
+  subscribe = fn => {
+    this.listeners.add(fn);
+    return () => {
+      this.listeners.delete(fn);
+    };
+  };
+  getSnapshot = () => {
+    return this.value;
+  };
+  update = updater => {
+    const newState = updater(this.value);
+    if (newState !== this.value) {
+      this.value = newState;
+      this.listeners.forEach(l => l(newState));
+    }
+  };
 }

package/esm/models/axis.d.ts

@@ -194,6 +194,35 @@ export type AxisGroup = {
    * @default 6
    */
   tickSize?: number;
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle?: ChartsTextProps['style'];
+};
+export type AxisGroups = {
+  /**
+   * Each group will have a label that is the stringified value of the group.
+   *
+   * @example
+   * If the axis is grouped by day, month and year.
+   *
+   * ```tsx
+   * [
+   *   { getValue: getDate },
+   *   { getValue: getMonth },
+   *   { getValue: getFullYear }
+   * ]
+   * ```
+   *
+   * Then the axis will have three rows, one for each group.
+   *
+   * ```bash
+   * | 31   | 1    | 2    |
+   * | Jan  | Feb         |
+   * | 2021               |
+   * ```
+   */
+  groups?: AxisGroup[];
 };
 export interface AxisScaleConfig {
   band: {
@@ -212,58 +241,12 @@ export interface AxisScaleConfig {
      */
     barGapRatio: number;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
-    /**
-     * Each group will have a label that is the stringified value of the group.
-     *
-     * @example
-     * If the axis is grouped by day, month and year.
-     *
-     * ```tsx
-     * [
-     *   { getValue: getDate },
-     *   { getValue: getMonth },
-     *   { getValue: getFullYear }
-     * ]
-     * ```
-     *
-     * Then the axis will have three rows, one for each group.
-     *
-     * ```bash
-     * | 31   | 1    | 2    |
-     * | Jan  | Feb         |
-     * | 2021               |
-     * ```
-     */
-    groups?: AxisGroup[];
-  } & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
+  } & AxisGroups & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
   point: {
     scaleType: 'point';
     scale: ScalePoint<number | Date | string>;
     colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
-    /**
-     * Each group will have a label that is the stringified value of the group.
-     *
-     * @example
-     * If the axis is grouped by day, month and year.
-     *
-     * ```tsx
-     * [
-     *   { getValue: getDate },
-     *   { getValue: getMonth },
-     *   { getValue: getFullYear }
-     * ]
-     * ```
-     *
-     * Then the axis will have three rows, one for each group.
-     *
-     * ```bash
-     * | 31   | 1    | 2    |
-     * | Jan  | Feb         |
-     * | 2021               |
-     * ```
-     */
-    groups?: AxisGroup[];
-  };
+  } & AxisGroups;
   log: {
     scaleType: 'log';
     scale: ScaleLogarithmic<number, number>;