[charts] Propagate the axis scale to the valueFormatter

docs/data/charts/axis/FormatterD3.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+
+const otherSetting = {
+  height: 300,
+  grid: { horizontal: true, vertical: true },
+  sx: {
+    [`& .${axisClasses.left} .${axisClasses.label}`]: {
+      transform: 'translateX(-10px)',
+    },
+  },
+};
+
+// https://en.wikipedia.org/wiki/Low-pass_filter
+const f0 = 440;
+const frequencyResponse = (f) => 5 / Math.sqrt(1 + (f / f0) ** 2);
+
+const dataset = [
+  0.1, 0.5, 0.8, 1, 5, 8, 10, 50, 80, 100, 500, 800, 1_000, 5_000, 8_000, 10_000,
+  50_000, 80_000, 100_000, 500_000, 800_000, 1_000_000,
+].map((f) => ({ frequency: f, voltage: frequencyResponse(f) }));
+
+export default function FormatterD3() {
+  return (
+    <LineChart
+      dataset={dataset}
+      xAxis={[
+        {
+          scaleType: 'log',
+          label: 'f (Hz)',
+          dataKey: 'frequency',
+          tickNumber: 20,
+          valueFormatter: (f, context) => {
+            if (context.location === 'tick') {
+              const d3Text = context.scale.tickFormat(30, 'e')(f);
+
+              return d3Text;
+            }
+            return `${f.toLocaleString()}Hz`;
+          },
+        },
+      ]}
+      yAxis={[
+        {
+          scaleType: 'log',
+          label: 'Vo/Vi',
+          valueFormatter: (f, context) => {
+            if (context.location === 'tick') {
+              const d3Text = context.scale.tickFormat(30, 'f')(f);
+
+              return d3Text;
+            }
+            return f.toLocaleString();
+          },
+        },
+      ]}
+      series={[{ dataKey: 'voltage' }]}
+      {...otherSetting}
+    >
+      <ChartsReferenceLine x={f0} />
+    </LineChart>
+  );
+}

docs/data/charts/axis/FormatterD3.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { ScaleLogarithmic } from '@mui/x-charts-vendor/d3-scale';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+
+const otherSetting = {
+  height: 300,
+  grid: { horizontal: true, vertical: true },
+  sx: {
+    [`& .${axisClasses.left} .${axisClasses.label}`]: {
+      transform: 'translateX(-10px)',
+    },
+  },
+};
+
+// https://en.wikipedia.org/wiki/Low-pass_filter
+const f0 = 440;
+const frequencyResponse = (f: number) => 5 / Math.sqrt(1 + (f / f0) ** 2);
+
+const dataset = [
+  0.1, 0.5, 0.8, 1, 5, 8, 10, 50, 80, 100, 500, 800, 1_000, 5_000, 8_000, 10_000,
+  50_000, 80_000, 100_000, 500_000, 800_000, 1_000_000,
+].map((f) => ({ frequency: f, voltage: frequencyResponse(f) }));
+
+export default function FormatterD3() {
+  return (
+    <LineChart
+      dataset={dataset}
+      xAxis={[
+        {
+          scaleType: 'log',
+          label: 'f (Hz)',
+          dataKey: 'frequency',
+          tickNumber: 20,
+          valueFormatter: (f, context) => {
+            if (context.location === 'tick') {
+              const d3Text = (
+                context.scale as ScaleLogarithmic<number, number, never>
+              ).tickFormat(
+                30,
+                'e',
+              )(f);
+
+              return d3Text;
+            }
+            return `${f.toLocaleString()}Hz`;
+          },
+        },
+      ]}
+      yAxis={[
+        {
+          scaleType: 'log',
+          label: 'Vo/Vi',
+          valueFormatter: (f, context) => {
+            if (context.location === 'tick') {
+              const d3Text = (
+                context.scale as ScaleLogarithmic<number, number, never>
+              ).tickFormat(
+                30,
+                'f',
+              )(f);
+
+              return d3Text;
+            }
+            return f.toLocaleString();
+          },
+        },
+      ]}
+      series={[{ dataKey: 'voltage' }]}
+      {...otherSetting}
+    >
+      <ChartsReferenceLine x={f0} />
+    </LineChart>
+  );
+}

docs/data/charts/axis/axis.md

@@ -70,6 +70,13 @@ To distinguish tick and tooltip, it uses the `context.location`.
 
 {{"demo": "FormatterDemoNoSnap.js"}}
 
+#### Using the D3 formatter
+
+The context gives you access to the axis scale.
+The D3 [tickFormat(tickNumber, scpecifier)](https://d3js.org/d3-scale/linear#tickFormat) method can be interesting to adapt ticks format based on the scale properties.
+
+{{"demo": "FormatterD3.js"}}
+
 ### Axis sub domain
 
 By default, the axis domain is computed such that all your data is visible.

docs/pages/x/api/charts/axis-config.json

@@ -34,7 +34,9 @@
       "default": "'extremities'"
     },
     "valueFormatter": {
-      "type": { "description": "(value: V, context: AxisValueFormatterContext) => string" }
+      "type": {
+        "description": "<TScaleName extends S>(value: V, context: AxisValueFormatterContext<TScaleName>) => string"
+      }
     },
     "zoom": { "type": { "description": "boolean | ZoomOptions" }, "isProPlan": true }
   }

packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx

@@ -60,10 +60,12 @@ function DefaultHeatmapTooltipContent(props: Pick<HeatmapTooltipProps, 'classes'
   const [xIndex, yIndex] = value;
 
   const formattedX =
-    xAxis.valueFormatter?.(xAxis.data![xIndex], { location: 'tooltip' }) ??
-    xAxis.data![xIndex].toLocaleString();
+    xAxis.valueFormatter?.(xAxis.data![xIndex], {
+      location: 'tooltip',
+      scale: xAxis.scale,
+    }) ?? xAxis.data![xIndex].toLocaleString();
   const formattedY =
-    yAxis.valueFormatter?.(yAxis.data![yIndex], { location: 'tooltip' }) ??
+    yAxis.valueFormatter?.(yAxis.data![yIndex], { location: 'tooltip', scale: yAxis.scale }) ??
     yAxis.data![yIndex].toLocaleString();
   const formattedValue = series[seriesId].valueFormatter(value, {
     dataIndex: identifier.dataIndex,

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

@@ -17,6 +17,7 @@ import {
   useUtilityClasses,
 } from './continuousColorLegendClasses';
 import { useChartGradientIdObjectBoundBuilder } from '../hooks/useChartGradientId';
+import { ZAxisDefaultized } from '../models/z-axis';
 
 type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
 
@@ -179,6 +180,8 @@ const getText = (
   }
   return label?.({ value, formattedValue }) ?? formattedValue;
 };
+const isZAxis = (axis: AxisDefaultized | ZAxisDefaultized): axis is ZAxisDefaultized =>
+  (axis as AxisDefaultized).scale === undefined;
 
 const ContinuousColorLegend = consumeThemeProps(
   'MuiContinuousColorLegend',
@@ -223,7 +226,8 @@ const ContinuousColorLegend = consumeThemeProps(
 
     // Get texts to display
 
-    const valueFormatter = (axisItem as AxisDefaultized)?.valueFormatter;
+    const valueFormatter = isZAxis(axisItem) ? undefined : axisItem.valueFormatter;
+
     const formattedMin = valueFormatter
       ? valueFormatter(minValue, { location: 'legend' })
       : minValue.toLocaleString();

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

@@ -183,8 +183,9 @@ const PiecewiseColorLegend = consumeThemeProps(
       return null;
     }
     const valueFormatter = (v: number | Date) =>
-      (axisItem as AxisDefaultized).valueFormatter?.(v, { location: 'legend' }) ??
-      v.toLocaleString();
+      (axisItem as AxisDefaultized).valueFormatter?.(v, {
+        location: 'legend',
+      }) ?? v.toLocaleString();
 
     const formattedLabels = colorMap.thresholds.map(valueFormatter);
 

packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx

@@ -123,7 +123,10 @@ export function useAxisTooltip(): UseAxisTooltipReturnValue | null {
     ((v: string | number | Date) =>
       usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
 
-  const axisFormattedValue = axisFormatter(axisValue, { location: 'tooltip' });
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip',
+    scale: usedAxis.scale,
+  });
 
   return {
     axisDirection: xAxisHasData ? 'x' : 'y',

packages/x-charts/src/hooks/useTicks.ts

@@ -110,7 +110,7 @@ export function useTicks(
         return [
           ...filteredDomain.map((value) => ({
             value,
-            formattedValue: valueFormatter?.(value, { location: 'tick' }) ?? `${value}`,
+            formattedValue: valueFormatter?.(value, { location: 'tick', scale }) ?? `${value}`,
             offset:
               scale(value)! -
               (scale.step() - scale.bandwidth()) / 2 +
@@ -141,7 +141,7 @@ export function useTicks(
 
       return filteredDomain.map((value) => ({
         value,
-        formattedValue: valueFormatter?.(value, { location: 'tick' }) ?? `${value}`,
+        formattedValue: valueFormatter?.(value, { location: 'tick', scale }) ?? `${value}`,
         offset: scale(value)!,
         labelOffset: 0,
       }));
@@ -158,7 +158,7 @@ export function useTicks(
     return ticks.map((value: any) => ({
       value,
       formattedValue:
-        valueFormatter?.(value, { location: 'tick' }) ?? scale.tickFormat(tickNumber)(value),
+        valueFormatter?.(value, { location: 'tick', scale }) ?? scale.tickFormat(tickNumber)(value),
       offset: scale(value),
       labelOffset: 0,
     }));

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

@@ -269,15 +269,29 @@ export interface AxisScaleComputedConfig {
   };
 }
 
-export type AxisValueFormatterContext = {
-  /**
-   * Location indicates where the value will be displayed.
-   * - `'tick'` The value is displayed on the axis ticks.
-   * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
-   * - `'legend'` The value is displayed in the legend when using color legend.
-   */
-  location: 'tick' | 'tooltip' | 'legend';
-};
+export type AxisValueFormatterContext<S extends ScaleName = ScaleName> =
+  | {
+      /**
+       * Location indicates where the value will be displayed.
+       * - `'tick'` The value is displayed on the axis ticks.
+       * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+       * - `'legend'` The value is displayed in the legend when using color legend.
+       */
+      location: 'legend';
+    }
+  | {
+      /**
+       * Location indicates where the value will be displayed.
+       * - `'tick'` The value is displayed on the axis ticks.
+       * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+       * - `'legend'` The value is displayed in the legend when using color legend.
+       */
+      location: 'tick' | 'tooltip';
+      /**
+       * The d3-scale instance associated to the axis.
+       */
+      scale: AxisScaleConfig[S]['scale'];
+    };
 
 export type AxisConfig<
   S extends ScaleName = ScaleName,
@@ -312,7 +326,10 @@ export type AxisConfig<
    * @param {AxisValueFormatterContext} context The rendering context of the value.
    * @returns {string} The string to display.
    */
-  valueFormatter?: (value: V, context: AxisValueFormatterContext) => string;
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
   /**
    * If `true`, hide this value in the tooltip
    */