@mui/x-charts 8.3.0 → 8.4.0

package/esm/hooks/useTicks.d.ts

@@ -40,10 +40,6 @@ export interface TickParams {
    */
   tickLabelPlacement?: 'middle' | 'tick';
 }
-export declare function getTickNumber(params: TickParams & {
-  range: number[];
-  domain: any[];
-}): number;
 export type TickItemType = {
   /**
    * This property is undefined only if it's the tick closing the last band
@@ -56,4 +52,5 @@ export type TickItemType = {
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
+  direction: 'x' | 'y';
 } & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];

package/esm/hooks/useTicks.js

@@ -1,21 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { isInfinity } from "../internals/isInfinity.js";
-export function getTickNumber(params) {
-  const {
-    tickMaxStep,
-    tickMinStep,
-    tickNumber,
-    range,
-    domain
-  } = params;
-  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
-  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
-  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
-}
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -29,8 +17,12 @@ export function useTicks(options) {
     valueFormatter,
     tickInterval,
     tickPlacement = 'extremities',
-    tickLabelPlacement: tickLabelPlacementProp
+    tickLabelPlacement: tickLabelPlacementProp,
+    direction
   } = options;
+  const {
+    instance
+  } = useChartContext();
   return React.useMemo(() => {
     // band scale
     if (isBandScale(scale)) {
@@ -74,18 +66,27 @@ export function useTicks(options) {
     }
     const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map((value, i) => {
-      return {
-        value,
-        formattedValue: valueFormatter?.(value, {
-          location: 'tick',
-          scale
-        }) ?? scale.tickFormat(tickNumber)(value),
-        offset: scale(value),
-        // Allowing the label to be placed in the middle of a continuous scale is weird.
-        // But it is useful in some cases, like funnel categories with a linear scale.
-        labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (scale(value) + scale(ticks[i - 1] ?? 0)) / 2 : 0
-      };
-    });
-  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacementProp]);
+
+    // Ticks inside the drawing area
+    const visibleTicks = [];
+    for (let i = 0; i < ticks.length; i += 1) {
+      const value = ticks[i];
+      const offset = scale(value);
+      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
+      if (isInside) {
+        visibleTicks.push({
+          value,
+          formattedValue: valueFormatter?.(value, {
+            location: 'tick',
+            scale
+          }) ?? scale.tickFormat(tickNumber)(value),
+          offset,
+          // Allowing the label to be placed in the middle of a continuous scale is weird.
+          // But it is useful in some cases, like funnel categories with a linear scale.
+          labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2 : 0
+        });
+      }
+    }
+    return visibleTicks;
+  }, [scale, tickLabelPlacementProp, tickInterval, tickNumber, tickPlacement, valueFormatter, direction, instance]);
 }

package/esm/index.js

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

package/esm/internals/constants.d.ts

@@ -1,4 +1,4 @@
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 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 ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;

package/esm/internals/constants.js

@@ -2,4 +2,4 @@
 export const ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-export const ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;

package/esm/internals/consumeSlots.js

@@ -94,4 +94,5 @@ export const consumeSlots = (name, slotPropName, options, InComponent) => {
     }));
   }
   return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
-};
+};
+if (process.env.NODE_ENV !== "production") consumeSlots.displayName = "consumeSlots";

package/esm/internals/consumeThemeProps.js

@@ -60,6 +60,7 @@ export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/Re
   const theme = useTheme();
   const classes = options.classesResolver?.(outProps, theme);
   const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== "production") OutComponent.displayName = "OutComponent";
   if (process.env.NODE_ENV !== 'production') {
     OutComponent.displayName = `consumeThemeProps(${name})`;
   }
@@ -67,4 +68,5 @@ export const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/Re
     classes: classes,
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") consumeThemeProps.displayName = "consumeThemeProps";

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
+import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
@@ -143,28 +144,21 @@ export const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
+  const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
+  const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = selectorChartDrawingArea(store.value);
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [store.value]);
+    return isXInside(x) && isYInside(y);
+  }, [isXInside, isYInside]);
   return {
     instance: {
-      isPointInside
+      isPointInside,
+      isXInside,
+      isYInside
     }
   };
 };

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -65,21 +65,24 @@ export interface UseChartDimensionsState {
 export interface UseChartDimensionsInstance {
   /**
    * Checks if a point is inside the drawing area.
-   * @param {Object} point The point to check.
-   * @param {number} point.x The x coordinate of the point.
-   * @param {number} point.y The y coordinate of the point.
-   * @param {Object} options The options of the check.
-   * @param {Element} [options.targetElement] The element to check if it is allowed to overflow the drawing area.
-   * @param {'x' | 'y'} [options.direction] The direction to check.
+   * @param {number} x The x coordinate of the point.
+   * @param {number} y The y coordinate of the point.
+   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (point: {
-    x: number;
-    y: number;
-  }, options?: {
-    targetElement?: Element;
-    direction?: 'x' | 'y';
-  }) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  /**
+   * Checks if the x coordinate is inside the drawing area.
+   * @param {number} x The x coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isXInside: (x: number) => boolean;
+  /**
+   * Checks if the y coordinate is inside the drawing area.
+   * @param {number} y The y coordinate of the point.
+   * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
+   */
+  isYInside: (y: number) => boolean;
 }
 export type UseChartDimensionsSignature = ChartPluginSignature<{
   params: UseChartDimensionsParameters;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
@@ -114,7 +114,7 @@ export function computeAxisValue({
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
     const zoomedRange = zoomScaleRange(range, zoomRange);
     const scale = getScale(scaleType, axisExtremums, zoomedRange);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { defaultizeZoom } from "./defaultizeZoom.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.js";
 export function defaultizeXAxis(inAxes, dataset) {
@@ -33,7 +32,7 @@ export function defaultizeXAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 
@@ -83,7 +82,7 @@ export function defaultizeYAxis(inAxes, dataset) {
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
       if (sharedConfig.zoom?.slider.enabled) {
-        offsets[position] += ZOOM_SLIDER_SIZE;
+        offsets[position] += sharedConfig.zoom.slider.size;
       }
     }
 

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
 const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
@@ -8,7 +9,8 @@ const defaultZoomOptions = {
   panning: true,
   filterMode: 'keep',
   slider: {
-    enabled: false
+    enabled: false,
+    size: DEFAULT_ZOOM_SLIDER_SIZE
   }
 };
 export const defaultizeZoom = (zoom, axisId, axisDirection) => {

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

@@ -1,7 +1,6 @@
-import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { createSelector } from "../../utils/selectors.js";
-export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
-export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
+export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));
+export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) : acc, 0));

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

@@ -71,9 +71,7 @@ export const useChartCartesianAxis = ({
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = getSVGPoint(element, target);
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         instance.cleanInteraction?.();
         return;
       }

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -77,6 +77,14 @@ export interface ZoomSliderOptions {
    * If `true`, the slider will be shown.
    */
   enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   *
+   * @default 28
+   */
+  size?: number;
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type GetZoomAxisFilters = (params: {

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { deg2rad } from "../../../angleConversion.js";
@@ -109,7 +109,7 @@ export function computeAxisValue({
       range,
       domain: axisExtremums
     }));
-    const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
     const scale = getScale(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
     const [minDomain, maxDomain] = finalScale.domain();

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -97,9 +97,7 @@ export const useChartPolarAxis = ({
       mousePosition.current.y = svgPoint.y;
 
       // Test if it's in the drawing area
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
         if (mousePosition.current.isInChart) {
           instance?.cleanInteraction();
           mousePosition.current.isInChart = false;

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -71,10 +71,7 @@ export const useChartVoronoi = ({
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside({
-          x: pointX,
-          y: pointY
-        })) {
+        if (!instance.isPointInside(pointX, pointY)) {
           // If the point is not displayed we move them to a trash coordinate.
           // This avoids managing index mapping before/after filtering.
           // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
@@ -100,7 +97,7 @@ export const useChartVoronoi = ({
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(element, event);
-      if (!instance.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }

package/esm/internals/ticks.d.ts

@@ -0,0 +1,6 @@
+import type { TickParams } from "../hooks/useTicks.js";
+export declare function getTickNumber(params: TickParams & {
+  range: number[];
+  domain: any[];
+}): number;
+export declare function scaleTickNumberByRange(tickNumber: number, range: number[]): number;

package/esm/internals/ticks.js

@@ -0,0 +1,22 @@
+export function getTickNumber(params) {
+  const {
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
+  } = params;
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
+}
+export function scaleTickNumberByRange(tickNumber, range) {
+  const rangeGap = range[1] - range[0];
+
+  /* If the range start and end are the same, `tickNumber` will become infinity, so we default to 1. */
+  if (rangeGap === 0) {
+    return 1;
+  }
+  return tickNumber / ((range[1] - range[0]) / 100);
+}

package/hooks/useTicks.d.ts

@@ -40,10 +40,6 @@ export interface TickParams {
    */
   tickLabelPlacement?: 'middle' | 'tick';
 }
-export declare function getTickNumber(params: TickParams & {
-  range: number[];
-  domain: any[];
-}): number;
 export type TickItemType = {
   /**
    * This property is undefined only if it's the tick closing the last band
@@ -56,4 +52,5 @@ export type TickItemType = {
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
+  direction: 'x' | 'y';
 } & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];

package/hooks/useTicks.js

@@ -5,24 +5,11 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTickNumber = getTickNumber;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
+var _ChartProvider = require("../context/ChartProvider");
 var _isBandScale = require("../internals/isBandScale");
 var _isInfinity = require("../internals/isInfinity");
-function getTickNumber(params) {
-  const {
-    tickMaxStep,
-    tickMinStep,
-    tickNumber,
-    range,
-    domain
-  } = params;
-  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
-  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
-  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
-}
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -36,8 +23,12 @@ function useTicks(options) {
     valueFormatter,
     tickInterval,
     tickPlacement = 'extremities',
-    tickLabelPlacement: tickLabelPlacementProp
+    tickLabelPlacement: tickLabelPlacementProp,
+    direction
   } = options;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   return React.useMemo(() => {
     // band scale
     if ((0, _isBandScale.isBandScale)(scale)) {
@@ -81,18 +72,27 @@ function useTicks(options) {
     }
     const tickLabelPlacement = tickLabelPlacementProp;
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map((value, i) => {
-      return {
-        value,
-        formattedValue: valueFormatter?.(value, {
-          location: 'tick',
-          scale
-        }) ?? scale.tickFormat(tickNumber)(value),
-        offset: scale(value),
-        // Allowing the label to be placed in the middle of a continuous scale is weird.
-        // But it is useful in some cases, like funnel categories with a linear scale.
-        labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (scale(value) + scale(ticks[i - 1] ?? 0)) / 2 : 0
-      };
-    });
-  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacementProp]);
+
+    // Ticks inside the drawing area
+    const visibleTicks = [];
+    for (let i = 0; i < ticks.length; i += 1) {
+      const value = ticks[i];
+      const offset = scale(value);
+      const isInside = direction === 'x' ? instance.isXInside(offset) : instance.isYInside(offset);
+      if (isInside) {
+        visibleTicks.push({
+          value,
+          formattedValue: valueFormatter?.(value, {
+            location: 'tick',
+            scale
+          }) ?? scale.tickFormat(tickNumber)(value),
+          offset,
+          // Allowing the label to be placed in the middle of a continuous scale is weird.
+          // But it is useful in some cases, like funnel categories with a linear scale.
+          labelOffset: tickLabelPlacement === 'middle' ? scale(ticks[i - 1] ?? 0) - (offset + scale(ticks[i - 1] ?? 0)) / 2 : 0
+        });
+      }
+    }
+    return visibleTicks;
+  }, [scale, tickLabelPlacementProp, tickInterval, tickNumber, tickPlacement, valueFormatter, direction, instance]);
 }

package/index.js

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

package/internals/constants.d.ts

@@ -1,4 +1,4 @@
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 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 ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;

package/internals/constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_MARGIN = void 0;
+exports.ZOOM_SLIDER_MARGIN = exports.DEFAULT_ZOOM_SLIDER_SIZE = void 0;
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 const ZOOM_SLIDER_MARGIN = exports.ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
-const ZOOM_SLIDER_SIZE = exports.ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+const DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;

package/internals/consumeSlots.js

@@ -102,4 +102,5 @@ const consumeSlots = (name, slotPropName, options, InComponent) => {
   }
   return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
 };
-exports.consumeSlots = consumeSlots;
+exports.consumeSlots = consumeSlots;
+if (process.env.NODE_ENV !== "production") consumeSlots.displayName = "consumeSlots";

package/internals/consumeThemeProps.js

@@ -67,6 +67,7 @@ const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.for
   const theme = (0, _styles.useTheme)();
   const classes = options.classesResolver?.(outProps, theme);
   const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== "production") OutComponent.displayName = "OutComponent";
   if (process.env.NODE_ENV !== 'production') {
     OutComponent.displayName = `consumeThemeProps(${name})`;
   }
@@ -75,4 +76,5 @@ const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.for
     ref: ref
   }));
 });
-exports.consumeThemeProps = consumeThemeProps;
+exports.consumeThemeProps = consumeThemeProps;
+if (process.env.NODE_ENV !== "production") consumeThemeProps.displayName = "consumeThemeProps";

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
+var _useSelector = require("../../../store/useSelector");
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
 var _defaultizeMargin = require("../../../defaultizeMargin");
@@ -150,28 +151,21 @@ const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const isPointInside = React.useCallback(({
-    x,
-    y
-  }, options) => {
+  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
+  const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
+  const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    const drawingArea = (0, _useChartDimensions.selectorChartDrawingArea)(store.value);
-    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
-    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
-    if (options?.direction === 'x') {
-      return isInsideX;
-    }
-    if (options?.direction === 'y') {
-      return isInsideY;
-    }
-    return isInsideX && isInsideY;
-  }, [store.value]);
+    return isXInside(x) && isYInside(y);
+  }, [isXInside, isYInside]);
   return {
     instance: {
-      isPointInside
+      isPointInside,
+      isXInside,
+      isYInside
     }
   };
 };