@mui/x-charts 7.8.0 → 7.9.0

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -209,10 +209,10 @@ function ChartsXAxis(inProps) {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: left,
+      x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.filter(tick => tick.offset >= left - 1 && tick.offset <= left + width + 1).map(({
       formattedValue,
       offset,
       labelOffset,
@@ -220,13 +220,15 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
+      const showTick = offset >= left - 1 && offset <= left + width + 1;
+      const showTickLabel = offset + xTickLabel >= left - 1 && offset + xTickLabel <= left + width + 1;
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
+        children: [!disableTicks && showTick && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {

package/esm/LineChart/MarkPlot.js

@@ -11,6 +11,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { cleanId } from '../internals/utils';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,6 +34,10 @@ function MarkPlot(props) {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
+  const {
+    left,
+    width
+  } = useDrawingArea();
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -67,13 +72,12 @@ function MarkPlot(props) {
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        const xRange = xAxis[xAxisKey].scale.range();
         const yRange = yScale.range();
         const isInRange = ({
           x,
           y
         }) => {
-          if (x < Math.min(...xRange) || x > Math.max(...xRange)) {
+          if (x < left || x > left + width) {
             return false;
           }
           if (y < Math.min(...yRange) || y > Math.max(...yRange)) {

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -229,7 +229,9 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { ResponsiveChartContainer };

package/esm/ScatterChart/Scatter.js

@@ -5,6 +5,7 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useHighlighted } from '../context';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -26,6 +27,10 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
+  const {
+    left,
+    width
+  } = useDrawingArea();
   const {
     useVoronoiInteraction
   } = React.useContext(InteractionContext);
@@ -38,10 +43,7 @@ function Scatter(props) {
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
-    const xRange = xScale.range();
     const yRange = yScale.range();
-    const minXRange = Math.min(...xRange);
-    const maxXRange = Math.max(...xRange);
     const minYRange = Math.min(...yRange);
     const maxYRange = Math.max(...yRange);
     const temp = [];
@@ -49,7 +51,7 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = x >= minXRange && x <= maxXRange && y >= minYRange && y <= maxYRange;
+      const isInRange = x >= left && x <= left + width && y >= minYRange && y <= maxYRange;
       const pointCtx = {
         type: 'scatter',
         seriesId: series.id,
@@ -74,7 +76,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, series.data, series.id, getInteractionItemProps, color, colorGetter, isFaded, isHighlighted]);
+  }, [xScale, yScale, left, width, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,

package/esm/ScatterChart/ScatterChart.js

@@ -339,7 +339,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { ScatterChart };

package/esm/context/CartesianProvider/computeValue.js

@@ -10,6 +10,16 @@ const getRange = (drawingArea, axisName, isReverse) => {
   const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
+const zoomedScaleRange = (scaleRange, zoomRange) => {
+  const rangeGap = scaleRange[1] - scaleRange[0];
+  const zoomGap = zoomRange[1] - zoomRange[0];
+
+  // If current zoom show the scale between p1 and p2 percents
+  // The range should be extended by adding [0, p1] and [p2, 100] segments
+  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
+  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
+  return [min, max];
+};
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
   const timeScale = scaleTime(axis.data, range);
@@ -19,7 +29,7 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
+export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName, zoomRange = [0, 100]) {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   const allAxis = [...(inAxis?.map((axis, index) => _extends({
     id: `defaultized-${axisName}-axis-${index}`
@@ -39,11 +49,12 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
         barGapRatio
       }, axis, {
-        scale: scaleBand(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
           values: axis.data
@@ -56,8 +67,9 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
     }
     if (isPointScaleConfig(axis)) {
       const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
-        scale: scalePoint(axis.data, scaleRange),
+        scale: scalePoint(axis.data, zoomedRange),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
           values: axis.data
@@ -74,11 +86,15 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
     }
     const scaleType = axis.scaleType ?? 'linear';
     const extremums = [axis.min ?? minData, axis.max ?? maxData];
-    const tickNumber = getTickNumber(_extends({}, axis, {
+    const rawTickNumber = getTickNumber(_extends({}, axis, {
       range,
       domain: extremums
     }));
-    const scale = getScale(scaleType, extremums, range).nice(tickNumber);
+    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const zoomedRange = zoomedScaleRange(range, zoomRange);
+
+    // TODO: move nice to prop? Disable when there is zoom?
+    const scale = getScale(scaleType, extremums, zoomedRange).nice(rawTickNumber);
     const [minDomain, maxDomain] = scale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({}, axis, {

package/esm/context/ZAxisContextProvider.js

@@ -37,7 +37,10 @@ function ZAxisContextProvider(props) {
       completedZAxis[axis.id] = _extends({}, axis, {
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' && axis.data ? getOrdinalColorScale(_extends({
           values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap))
+        }, axis.colorMap)) : getColorScale(axis.colorMap.type === 'continuous' ? _extends({
+          min: axis.min,
+          max: axis.max
+        }, axis.colorMap) : axis.colorMap))
       });
     });
     return {
@@ -83,7 +86,9 @@ process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { ZAxisContextProvider };

package/esm/hooks/index.js

@@ -1,6 +1,7 @@
 export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
+export * from './useAxis';
 export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from './useSeries';

package/esm/hooks/useAxis.js

@@ -0,0 +1,17 @@
+import { useCartesianContext } from '../context/CartesianProvider';
+export function useXAxis(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = useCartesianContext();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id];
+}
+export function useYAxis(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = useCartesianContext();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id];
+}

package/esm/hooks/useAxisEvents.js

@@ -98,7 +98,7 @@ export const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(svgRef.current, target);
+      const svgPoint = getSVGPoint(element, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -121,15 +121,26 @@ export const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('touchend', handleOut);
-      element.removeEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/esm/hooks/useInteractionItemProps.js

@@ -13,7 +13,12 @@ export const useInteractionItemProps = skip => {
     return () => ({});
   }
   const getInteractionItemProps = data => {
-    const onMouseEnter = () => {
+    const onPointerDown = event => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    };
+    const onPointerEnter = () => {
       dispatchInteraction({
         type: 'enterItem',
         data
@@ -23,7 +28,8 @@ export const useInteractionItemProps = skip => {
         dataIndex: data.dataIndex
       });
     };
-    const onMouseLeave = () => {
+    const onPointerLeave = event => {
+      event.currentTarget.releasePointerCapture(event.pointerId);
       dispatchInteraction({
         type: 'leaveItem',
         data
@@ -31,8 +37,9 @@ export const useInteractionItemProps = skip => {
       clearHighlighted();
     };
     return {
-      onMouseEnter,
-      onMouseLeave
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown
     };
   };
   return getInteractionItemProps;

package/esm/hooks/useScale.js

@@ -1,5 +1,6 @@
-import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
+import { useXAxis, useYAxis } from './useAxis';
+
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.
@@ -13,18 +14,10 @@ export function getValueToPositionMapper(scale) {
   return value => scale(value);
 }
 export function useXScale(identifier) {
-  const {
-    xAxis,
-    xAxisIds
-  } = useCartesianContext();
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
-  return xAxis[id].scale;
+  const axis = useXAxis(identifier);
+  return axis.scale;
 }
 export function useYScale(identifier) {
-  const {
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
-  return yAxis[id].scale;
+  const axis = useYAxis(identifier);
+  return axis.scale;
 }

package/esm/internals/index.js

@@ -6,6 +6,7 @@ export * from '../ResponsiveChartContainer/ResizableContainer';
 // hooks
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
 export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
@@ -15,6 +16,7 @@ export { useBarChartProps } from '../BarChart/useBarChartProps';
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getLabel';
 export * from './getSVGPoint';
 
 // contexts

package/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
+export * from './useAxis';
 export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries, } from './useSeries';

package/hooks/index.js

@@ -76,6 +76,18 @@ Object.keys(_useScale).forEach(function (key) {
     }
   });
 });
+var _useAxis = require("./useAxis");
+Object.keys(_useAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAxis[key];
+    }
+  });
+});
 var _useColorScale = require("./useColorScale");
 Object.keys(_useColorScale).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/useAxis.d.ts

@@ -0,0 +1,2 @@
+export declare function useXAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsXAxisProps>;
+export declare function useYAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;

package/hooks/useAxis.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXAxis = useXAxis;
+exports.useYAxis = useYAxis;
+var _CartesianProvider = require("../context/CartesianProvider");
+function useXAxis(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id];
+}
+function useYAxis(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id];
+}

package/hooks/useAxisEvents.js

@@ -106,7 +106,7 @@ const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svgRef.current, target);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -129,15 +129,26 @@ const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('touchend', handleOut);
-      element.removeEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/hooks/useInteractionItemProps.d.ts

@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { SeriesItemIdentifier } from '../models';
 export declare const useInteractionItemProps: (skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
+    onPointerEnter: () => void;
+    onPointerLeave: (event: React.PointerEvent) => void;
+    onPointerDown: (event: React.PointerEvent) => void;
 });

package/hooks/useInteractionItemProps.js

@@ -21,7 +21,12 @@ const useInteractionItemProps = skip => {
     return () => ({});
   }
   const getInteractionItemProps = data => {
-    const onMouseEnter = () => {
+    const onPointerDown = event => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    };
+    const onPointerEnter = () => {
       dispatchInteraction({
         type: 'enterItem',
         data
@@ -31,7 +36,8 @@ const useInteractionItemProps = skip => {
         dataIndex: data.dataIndex
       });
     };
-    const onMouseLeave = () => {
+    const onPointerLeave = event => {
+      event.currentTarget.releasePointerCapture(event.pointerId);
       dispatchInteraction({
         type: 'leaveItem',
         data
@@ -39,8 +45,9 @@ const useInteractionItemProps = skip => {
       clearHighlighted();
     };
     return {
-      onMouseEnter,
-      onMouseLeave
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown
     };
   };
   return getInteractionItemProps;

package/hooks/useScale.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValueToPositionMapper = getValueToPositionMapper;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
+var _useAxis = require("./useAxis");
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.
@@ -21,18 +21,10 @@ function getValueToPositionMapper(scale) {
   return value => scale(value);
 }
 function useXScale(identifier) {
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
-  return xAxis[id].scale;
+  const axis = (0, _useAxis.useXAxis)(identifier);
+  return axis.scale;
 }
 function useYScale(identifier) {
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
-  return yAxis[id].scale;
+  const axis = (0, _useAxis.useYAxis)(identifier);
+  return axis.scale;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.8.0
+ * @mui/x-charts v7.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -3,6 +3,7 @@ export * from '../ResponsiveChartContainer/useChartContainerDimensions';
 export * from '../ResponsiveChartContainer/ResizableContainer';
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
 export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
@@ -10,6 +11,7 @@ export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getLabel';
 export * from './getSVGPoint';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';

package/internals/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useReducedMotion: true,
   useSeries: true,
+  useInteractionItemProps: true,
   useDrawingArea: true,
   useChartContainerHooks: true,
   useScatterChartProps: true,
@@ -30,6 +31,12 @@ Object.defineProperty(exports, "useDrawingArea", {
     return _useDrawingArea.useDrawingArea;
   }
 });
+Object.defineProperty(exports, "useInteractionItemProps", {
+  enumerable: true,
+  get: function () {
+    return _useInteractionItemProps.useInteractionItemProps;
+  }
+});
 Object.defineProperty(exports, "useLineChartProps", {
   enumerable: true,
   get: function () {
@@ -92,6 +99,7 @@ Object.keys(_ResizableContainer).forEach(function (key) {
 });
 var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
@@ -121,6 +129,18 @@ Object.keys(_configInit).forEach(function (key) {
     }
   });
 });
+var _getLabel = require("./getLabel");
+Object.keys(_getLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getLabel[key];
+    }
+  });
+});
 var _getSVGPoint = require("./getSVGPoint");
 Object.keys(_getSVGPoint).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/models/colorMapping.d.ts

@@ -13,7 +13,7 @@ export interface ContinuousColorConfig<Value = number | Date> {
     /**
      * The colors to render. It can be an array with the extremum colors, or an interpolation function.
      */
-    color: [string, string] | ((t: number) => string);
+    color: readonly [string, string] | ((t: number) => string);
 }
 export interface PiecewiseColorConfig<Value = number | Date> {
     type: 'piecewise';