Alternative formatting

Author: bernardobelchior

packages/x-charts/src/internals/defaultValueFormatters.ts

@@ -1,21 +1,24 @@
-import { AxisValueFormatterContext, ScaleName } from '../models/axis';
+import { AxisValueFormatterContext, ContinuousScaleName } from '../models/axis';
+
+const numberFormatter = new Intl.NumberFormat(undefined, { maximumSignificantDigits: 2 });
 
 /**
  * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
  * @returns A formatter function for continuous values.
  */
 export function createScalarFormatter(tickNumber: number) {
-  return function defaultScalarValueFormatter<S extends ScaleName = ScaleName>(
+  return function defaultScalarValueFormatter<S extends ContinuousScaleName = ContinuousScaleName>(
     value: any,
     context: AxisValueFormatterContext<S>,
   ): string {
-    if (
-      (context.location === 'tick' || context.location === 'zoom-slider-tooltip') &&
-      'tickFormat' in context.scale
-    ) {
+    if (context.location === 'tick') {
       return context.scale.tickFormat(tickNumber)(value);
     }
 
+    if (context.location === 'zoom-slider-tooltip' && typeof value === 'number') {
+      return numberFormatter.format(value);
+    }
+
     return `${value}`;
   };
 }

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

@@ -11,6 +11,7 @@ import {
   DefaultedXAxis,
   DefaultedYAxis,
   DefaultedAxis,
+  AxisValueFormatterContext,
 } from '../../../../models/axis';
 import { CartesianChartSeriesType, ChartSeriesType } from '../../../../models/seriesType/config';
 import { getColorScale, getOrdinalColorScale } from '../../../colorScale';
@@ -209,7 +210,12 @@ export function computeAxisValue<T extends ChartSeriesType>({
       scale: finalScale.domain(domain) as any,
       tickNumber,
       colorScale: axis.colorMap && getColorScale(axis.colorMap),
-      valueFormatter: axis.valueFormatter ?? createScalarFormatter(tickNumber),
+      valueFormatter:
+        axis.valueFormatter ??
+        (createScalarFormatter(tickNumber) as <TScaleName extends ScaleName>(
+          value: any,
+          context: AxisValueFormatterContext<TScaleName>,
+        ) => string),
     };
   });
   return {