Use the correct scale with multiple axes

Author: alexfauquette

packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx

@@ -1,10 +1,11 @@
 'use client';
 import * as React from 'react';
-import { getValueToPositionMapper, useXScale } from '../hooks/useScale';
+import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 import { useSelector } from '../internals/store/useSelector';
 import { useStore } from '../internals/store/useStore';
 import {
+  selectorChartsHighlightXAxisScale,
   selectorChartsHighlightXAxisValue,
   UseChartCartesianAxisSignature,
 } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
@@ -24,10 +25,9 @@ export default function ChartsXHighlight(props: {
 
   const { top, height } = useDrawingArea();
 
-  const xScale = useXScale();
-
   const store = useStore<[UseChartCartesianAxisSignature]>();
   const axisXValue = useSelector(store, selectorChartsHighlightXAxisValue);
+  const xScale = useSelector(store, selectorChartsHighlightXAxisScale);
 
   const getXPosition = getValueToPositionMapper(xScale);
 

packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx

@@ -1,10 +1,11 @@
 'use client';
 import * as React from 'react';
-import { getValueToPositionMapper, useYScale } from '../hooks/useScale';
+import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 import { useSelector } from '../internals/store/useSelector';
 import { useStore } from '../internals/store/useStore';
 import {
+  selectorChartsHighlightYAxisScale,
   selectorChartsHighlightYAxisValue,
   UseChartCartesianAxisSignature,
 } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
@@ -24,10 +25,9 @@ export default function ChartsYHighlight(props: {
 
   const { left, width } = useDrawingArea();
 
-  const yScale = useYScale();
-
   const store = useStore<[UseChartCartesianAxisSignature]>();
   const axisYValue = useSelector(store, selectorChartsHighlightYAxisValue);
+  const yScale = useSelector(store, selectorChartsHighlightYAxisScale);
 
   const getYPosition = getValueToPositionMapper(yScale);
 

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianHighlight.selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '../../utils/selectors';
-import { CartesianAxisItemIdentifier } from '../../../../models/axis';
+import { CartesianAxisItemIdentifier, ChartsAxisProps } from '../../../../models/axis';
 import { selectorChartXAxis, selectorChartYAxis } from './useChartCartesianAxisRendering.selectors';
 
 import {
@@ -10,6 +10,7 @@ import {
 } from './useChartCartesianInteraction.selectors';
 import { ChartState } from '../../models/chart';
 import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types';
+import { ComputeResult } from './computeAxisValue';
 
 const selectorChartControlledCartesianAxisHighlight = (
   state: ChartState<[], [UseChartCartesianAxisSignature]>,
@@ -79,3 +80,32 @@ export const selectorChartsHighlightYAxisValue = createSelector(
     return null;
   },
 );
+
+/**
+ * Get the scale of the axis with highlight if controlled. The default axis otherwise.
+ * @param controlledItem The controlled value of highlightedAxis
+ * @param axis The axis stats after all the processing
+ * @returns axis scale
+ */
+const selectScale = (
+  controlledItem: CartesianAxisItemIdentifier | null | undefined,
+  axis: ComputeResult<ChartsAxisProps>,
+) => {
+  if (controlledItem === undefined) {
+    return axis.axis[axis.axisIds[0]].scale;
+  }
+  if (controlledItem !== null) {
+    return axis.axis[controlledItem.axisId]?.scale;
+  }
+  return axis.axis[axis.axisIds[0]].scale;
+};
+
+export const selectorChartsHighlightXAxisScale = createSelector(
+  [selectorChartsControlledXAxisHighlight, selectorChartXAxis],
+  selectScale,
+);
+
+export const selectorChartsHighlightYAxisScale = createSelector(
+  [selectorChartsControlledYAxisHighlight, selectorChartYAxis],
+  selectScale,
+);