a few more

docs/data/charts/areas-demo/areas-demo.md

@@ -36,7 +36,7 @@ You can pass this gradient definition as a children of the `<LineChart />` and u
 To do so you will need to use the [`<linearGradient />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) and [`<stop />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) SVG elements.
 
 The first part is to get the SVG total height.
-Which can be done with the `useDrawingArea` hook.
+Which can be done with the `useDrawingArea()` hook.
 It's useful to define the `<linearGradient />` as a vector that goes from the top to the bottom of our SVG container.
 
 Then to define where the gradient should switch from one color to another, you can use the `useYScale` hook to get the y coordinate of value 0.

docs/data/charts/axis/axis.md

@@ -56,7 +56,7 @@ Which expects an array of value coherent with the `scaleType`:
 Some series types also require specific axis attributes:
 
 - line plots require an `xAxis` to have `data` provided
-- bar plots require an `xAxis` with `scaleType='band'` and some `data` provided.
+- bar plots require an `xAxis` with `scaleType="band"` and some `data` provided.
 
 ### Axis formatter
 

docs/data/charts/bars/bars.md

@@ -100,7 +100,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts
 
 {{"demo": "ColorScale.js"}}
 
-### Border Radius
+### Border radius
 
 To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots).
 
@@ -117,7 +117,7 @@ Or you can pass `'value'` to display the raw value of the bar.
 
 {{"demo": "BarLabel.js"}}
 
-### Custom Labels
+### Custom labels
 
 You can display, change, or hide labels based on conditional logic.
 To do so, provide a function to the `barLabel`.
@@ -174,7 +174,7 @@ import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
 To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 ```jsx
 // For a single component chart

docs/data/charts/components/components.md

@@ -20,7 +20,7 @@ Charts dimensions are defined by a few props:
 The term **drawing area** refers to the space available to plot data (scatter points, lines, or pie arcs).
 The `margin` is used to leave some space for extra elements, such as the axes, the legend, or the title.
 
-You can use the `useDrawingArea` hook in the charts subcomponents to get the coordinates of the **drawing area**.
+You can use the `useDrawingArea()` hook in the charts subcomponents to get the coordinates of the **drawing area**.
 
 ```jsx
 import { useDrawingArea } from '@mui/x-charts';

docs/data/charts/gauge/gauge.md

@@ -101,7 +101,7 @@ import {
 
 ### Creating your components
 
-To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration:
+To create your own components, use the `useGaugeState()` hook which provides all you need about the gauge configuration:
 
 - information about the value: `value`, `valueMin`, `valueMax`
 - information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`

docs/data/charts/lines/lines.md

@@ -235,7 +235,7 @@ sx={{
 To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 :::warning
 If you support interactive ways to add or remove series from your chart, you have to provide the series' id.

docs/data/charts/pie/pie.md

@@ -110,7 +110,7 @@ const onItemClick = (
 To skip animation at the creation and update of your chart you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 ```jsx
 // For a single component chart

docs/data/charts/tooltip/tooltip.md

@@ -159,6 +159,6 @@ To follow the mouse position, you can use the `useMouseTracker`, or track events
 
 ### Tooltip position
 
-This demo show example about how to use additional hooks such as `useXAxis` or `useDrawingArea` to customize the tooltip position.
+This demo show example about how to use additional hooks such as `useXAxis` or `useDrawingArea()` to customize the tooltip position.
 
 {{"demo": "CustomTooltipPosition.js"}}

docs/data/data-grid/column-definition/column-definition.md

@@ -102,8 +102,8 @@ Read more in the [handling autogenerated rows](/x/react-data-grid/column-definit
 :::
 
 :::warning
-[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
-The value passed to the `groupingValueGetter` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
+[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter()`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
+The value passed to the `groupingValueGetter()` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
 :::
 
 ### Value formatter
@@ -137,7 +137,7 @@ It resolves the rendered output in the following order:
 
 1. `renderCell() => ReactElement`
 2. `valueFormatter() => string`
-3. `valueGetter() => string`
+3. `valueGetter => string`
 4. `row[field]`
 
 The `renderCell` method of the column definitions is similar to `valueFormatter`.

docs/data/data-grid/editing/editing.md

@@ -157,7 +157,7 @@ When the user performs an action to [stop editing](#stop-editing), the `processR
 Use it to send the new values to the server and save them into a database or other storage method.
 The callback is called with three arguments:
 
-1. The updated row with the new values returned by the [`valueSetter`](#value-parser-and-value-setter).
+1. The updated row with the new values returned by the [`valueSetter()`](#value-parser-and-value-setter).
 2. The original values of the row before editing.
 3. An object with additional properties such as `rowId`.
 
@@ -238,10 +238,10 @@ const columns: GridColDef[] = [
 ];
 ```
 
-You can use the `valueSetter` property of the column definition to customize how the row is updated with a new value.
+You can use the `valueSetter()` property of the column definition to customize how the row is updated with a new value.
 This lets you insert a value from a nested object.
 It is called with an object containing the new cell value to be saved as well as the row that the cell belongs to.
-If you are already using a `valueGetter` to extract the value from a nested object, then the `valueSetter` will probably also be necessary.
+If you are already using a `valueGetter` to extract the value from a nested object, then the `valueSetter()` will probably also be necessary.
 
 ```tsx
 const columns: GridColDef[] = [
@@ -254,8 +254,8 @@ const columns: GridColDef[] = [
 ];
 ```
 
-In the following demo, both the `valueParser` and the `valueSetter` are defined for the **Full name** column.
-The `valueParser` capitalizes the value entered, and the `valueSetter` splits the value and saves it correctly into the row model:
+In the following demo, both the `valueParser` and the `valueSetter()` are defined for the **Full name** column.
+The `valueParser` capitalizes the value entered, and the `valueSetter()` splits the value and saves it correctly into the row model:
 
 {{"demo": "ValueParserSetterGrid.js", "bg": "inline", "defaultCodeOpen": false}}
 

packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx

@@ -20,7 +20,7 @@ export interface LegendRendererProps
   series: FormattedSeries;
   seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
   /**
-   * @deprecated Use the `useDrawingArea` hook instead.
+   * @deprecated Use the `useDrawingArea()` hook instead.
    */
   drawingArea: Omit<DrawingArea, 'isPointInside'>;
   /**
@@ -76,7 +76,7 @@ DefaultChartsLegend.propTypes = {
    */
   direction: PropTypes.oneOf(['column', 'row']).isRequired,
   /**
-   * @deprecated Use the `useDrawingArea` hook instead.
+   * @deprecated Use the `useDrawingArea()` hook instead.
    */
   drawingArea: PropTypes.shape({
     bottom: PropTypes.number.isRequired,