feedback

Author: alexfauquette

docs/data/charts/highlighting/ControlledAxisHighlight.js

@@ -13,10 +13,10 @@ import RadioGroup from '@mui/material/RadioGroup';
 import { LineChart } from '@mui/x-charts/LineChart';
 
 export default function ControlledAxisHighlight() {
-  const [xAxisHighlight, setXAxisHighlight] = React.useState({
+  const [highlightedAxis, setHighlightedAxis] = React.useState({
     axisId: 'x-axis',
     dataIndex: 2,
-    value: null,
+    direction: 'x',
   });
 
   const [chartType, setChartType] = React.useState('bar');
@@ -28,10 +28,10 @@ export default function ControlledAxisHighlight() {
   };
 
   const handleAxisHighlight = (event) => {
-    setXAxisHighlight({
+    setHighlightedAxis({
       axisId: 'x-axis',
       dataIndex: Number(event.target.value),
-      value: null,
+      direction: 'x',
     });
   };
 
@@ -55,7 +55,7 @@ export default function ControlledAxisHighlight() {
         <RadioGroup
           aria-labelledby="axis-index-radio-group"
           name="radio-buttons-group"
-          value={xAxisHighlight?.dataIndex ?? null}
+          value={highlightedAxis?.dataIndex ?? null}
           onChange={handleAxisHighlight}
           row
         >
@@ -70,17 +70,17 @@ export default function ControlledAxisHighlight() {
         {chartType === 'bar' ? (
           <BarChart
             {...barChartsProps}
-            xAxisHighlight={xAxisHighlight}
-            onXAxisInteraction={(newState) =>
-              setXAxisHighlight(newState && newState[0])
+            highlightedAxis={highlightedAxis}
+            onAxisInteraction={(newState) =>
+              setHighlightedAxis(newState && newState[0])
             }
           />
         ) : (
           <LineChart
             {...lineChartsProps}
-            xAxisHighlight={xAxisHighlight}
-            onXAxisInteraction={(newState) =>
-              setXAxisHighlight(newState && newState[0])
+            highlightedAxis={highlightedAxis}
+            onAxisInteraction={(newState) =>
+              setHighlightedAxis(newState && newState[0])
             }
           />
         )}

docs/data/charts/highlighting/ControlledAxisHighlight.tsx

@@ -9,15 +9,15 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormLabel from '@mui/material/FormLabel';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
-import { AxisPointerIdentifier } from '@mui/x-charts/models';
+import { CartesianAxisItemIdentifier } from '@mui/x-charts/models';
 import { LineChart, LineChartProps } from '@mui/x-charts/LineChart';
 
 export default function ControlledAxisHighlight() {
-  const [xAxisHighlight, setXAxisHighlight] =
-    React.useState<AxisPointerIdentifier | null>({
+  const [highlightedAxis, setHighlightedAxis] =
+    React.useState<CartesianAxisItemIdentifier | null>({
       axisId: 'x-axis',
       dataIndex: 2,
-      value: null,
+      direction: 'x',
     });
 
   const [chartType, setChartType] = React.useState<'bar' | 'line'>('bar');
@@ -29,10 +29,10 @@ export default function ControlledAxisHighlight() {
   };
 
   const handleAxisHighlight = (event: any) => {
-    setXAxisHighlight({
+    setHighlightedAxis({
       axisId: 'x-axis',
       dataIndex: Number(event.target.value),
-      value: null,
+      direction: 'x',
     });
   };
 
@@ -56,7 +56,7 @@ export default function ControlledAxisHighlight() {
         <RadioGroup
           aria-labelledby="axis-index-radio-group"
           name="radio-buttons-group"
-          value={xAxisHighlight?.dataIndex ?? null}
+          value={highlightedAxis?.dataIndex ?? null}
           onChange={handleAxisHighlight}
           row
         >
@@ -71,17 +71,17 @@ export default function ControlledAxisHighlight() {
         {chartType === 'bar' ? (
           <BarChart
             {...barChartsProps}
-            xAxisHighlight={xAxisHighlight}
-            onXAxisInteraction={(newState) =>
-              setXAxisHighlight(newState && newState[0])
+            highlightedAxis={highlightedAxis}
+            onAxisInteraction={(newState) =>
+              setHighlightedAxis(newState && newState[0])
             }
           />
         ) : (
           <LineChart
             {...lineChartsProps}
-            xAxisHighlight={xAxisHighlight}
-            onXAxisInteraction={(newState) =>
-              setXAxisHighlight(newState && newState[0])
+            highlightedAxis={highlightedAxis}
+            onAxisInteraction={(newState) =>
+              setHighlightedAxis(newState && newState[0])
             }
           />
         )}

docs/data/charts/highlighting/highlighting.md

@@ -55,21 +55,19 @@ You can set the `highlightedItem` value based on inputs, and sync it when the us
 
 ### Axis
 
-The highlight can be controlled by using `xAxisHighlight`/`yAxisHighlight` and the `onXAxisInteraction`/`onYAxisInteraction`.
+The highlight can be controlled by using `highlightedAxis` prop.
+Its value can be `null` to remove axis highlight, or an object `{ direction: 'x' | 'y', axisId: string, dataIndex: number }`.
 
-The `xAxisHighlight`/`yAxisHighlight` are objects `{ axisId, dataIndex, value }`.
-If the `dataIndex` is provided, the axis `value` is ignored an computed from the `dataIndex` and `axis.data`.
-
-The `onXAxisInteraction`/`onYAxisInteraction` handler are trigger each time pointer moves from one axis value to another.
-Its parameter is an array of objects `{ axisId, dataIndex, value }`.
+The `onAxisInteraction` handler is trigger each time the pointer crosses the boundaries between two axis values.
+Its parameter is an array of objects `{ direction, axisId, dataIndex }`.
 One per axis.
+Axes without data are ignored by the handler.
 
 :::warning
-The handler get an array of axis value identifier.
-Whereas the controlled value only accept on objects.
+The handler gets an array of objects.
+Whereas the controlled value only accept one object.
 
 For now highlight components assume you use the first axis.
-Being able to highlight any axis will arrive in further development.
 :::
 
 {{"demo": "ControlledAxisHighlight.js"}}