[charts] Fix applyDomain docs (@JCQuintas) (#15333)

Co-authored-by: Jose C Quintas Jr <[email protected]>

docs/data/charts/axis/CustomDomainYAxis.js

@@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
 const settings = {
-  valueFormatter: (v) => `${v}%`,
+  valueFormatter: (value) => `${value}%`,
   height: 200,
   showTooltip: true,
   showHighlight: true,
@@ -39,7 +39,6 @@ export default function CustomDomainYAxis() {
         <MenuItem value="strict">strict</MenuItem>
         <MenuItem value="function">function</MenuItem>
       </TextField>
-
       <BarChart
         yAxis={[
           {

docs/data/charts/axis/CustomDomainYAxis.tsx

@@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
 const settings = {
-  valueFormatter: (v: number | null) => `${v}%`,
+  valueFormatter: (value: number | null) => `${value}%`,
   height: 200,
   showTooltip: true,
   showHighlight: true,
@@ -43,7 +43,6 @@ export default function CustomDomainYAxis() {
         <MenuItem value="strict">strict</MenuItem>
         <MenuItem value="function">function</MenuItem>
       </TextField>
-
       <BarChart
         yAxis={[
           {

docs/data/charts/axis/axis.md

@@ -86,7 +86,7 @@ xAxis={[
 
 {{"demo": "MinMaxExample.js"}}
 
-### Relative axis sub domain
+### Relative axis subdomain
 
 You can adjust the axis range relatively to its data by using the `domainLimit` option.
 It can take 3 different values:

docs/data/charts/sparkline/CustomDomainYAxis.js

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const settings = {
-  valueFormatter: (v) => `${v}%`,
+  valueFormatter: (value) => `${value}%`,
   height: 100,
   showTooltip: true,
   showHighlight: true,
@@ -66,7 +66,6 @@ export default function CustomDomainYAxis() {
         </TextField>
         <Typography>y-axis range: {yRange[domainLimitKey]}</Typography>
       </Stack>
-
       <Stack
         sx={{
           width: '100%',

docs/data/charts/sparkline/CustomDomainYAxis.tsx

@@ -8,7 +8,7 @@ import { Theme } from '@mui/material/styles';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const settings = {
-  valueFormatter: (v: number | null) => `${v}%`,
+  valueFormatter: (value: number | null) => `${value}%`,
   height: 100,
   showTooltip: true,
   showHighlight: true,
@@ -70,7 +70,6 @@ export default function CustomDomainYAxis() {
         </TextField>
         <Typography>y-axis range: {yRange[domainLimitKey]}</Typography>
       </Stack>
-
       <Stack
         sx={{
           width: '100%',

docs/data/charts/sparkline/CustomYAxis.js

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const settings = {
-  valueFormatter: (v) => `${v}%`,
+  valueFormatter: (value) => `${value}%`,
   height: 100,
   showTooltip: true,
   showHighlight: true,

docs/data/charts/sparkline/CustomYAxis.tsx

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const settings = {
-  valueFormatter: (v: number | null) => `${v}%`,
+  valueFormatter: (value: number | null) => `${value}%`,
   height: 100,
   showTooltip: true,
   showHighlight: true,

docs/data/charts/sparkline/sparkline.md

@@ -60,7 +60,7 @@ The first row has the default y-axis values, while on the second row a fixed ran
 {{"demo": "CustomYAxis.js"}}
 
 You can adjust the y-axis range of a sparkline relatively to its data by using the `domainLimit` option in the `yAxis` configuration.
-See the [axis docs page](http://localhost:3001/x/react-charts/axis/#relative-axis-sub-domain) form more information.
+See the [axis docs page](/x/react-charts/axis/#relative-axis-subdomain) for more information.
 
 The demo below shows different ways to set the y-axis range.
 They always display the same data, going from -15 to 92, but with different `domainLimit` settings.

docs/translations/api-docs/charts/axis-config.json

@@ -11,7 +11,7 @@
       "description": "The key used to retrieve <code>data</code> from the <code>dataset</code> prop."
     },
     "domainLimit": {
-      "description": "Defines the axis scale domain based on the min/max values of series linked to it.<br />- &#39;nice&#39;: Rounds the domain at human friendly values.<br />- &#39;strict&#39;: Set the domain to the min/max value provided. No extras space is added.<br />- function: eceives the calculated extremums as parameters, and should return the axis domain."
+      "description": "Defines the axis scale domain based on the min/max values of series linked to it.<br />- &#39;nice&#39;: Rounds the domain at human friendly values.<br />- &#39;strict&#39;: Set the domain to the min/max value provided. No extras space is added.<br />- function: Receives the calculated extremums as parameters, and should return the axis domain."
     },
     "hideTooltip": { "description": "If <code>true</code>, hide this value in the tooltip" },
     "max": {

packages/x-charts/src/models/axis.ts

@@ -337,7 +337,7 @@ export type AxisConfig<
    * Defines the axis scale domain based on the min/max values of series linked to it.
    * - 'nice': Rounds the domain at human friendly values.
    * - 'strict': Set the domain to the min/max value provided. No extras space is added.
-   * - function: eceives the calculated extremums as parameters, and should return the axis domain.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
    */
   domainLimit?: 'nice' | 'strict' | ((min: number, max: number) => { min: number; max: number });
 } & Omit<Partial<AxisProps>, 'axisId'> &