mui · bernardobelchior · Sep 10, 2025 · Aug 13, 2025 · Aug 15, 2025 · Sep 9, 2025
@@ -68,30 +68,26 @@ export function ChartsXAxisImpl({ axis, ...inProps }: ChartsXAxisImplProps) {
     ownerState: {},
   });
 
-  const domain = xScale.domain();
-  const isScaleBand = isBandScale(xScale);
-
-  // Skip axis rendering if no data is available
-  // - The domain is an empty array for band/point scales.
-  // - The domains contains Infinity for continuous scales.
-  // - The position is set to 'none'.
-  const skipAxisRendering =
-    (isScaleBand && domain.length === 0) ||
-    (!isScaleBand && domain.some(isInfinity)) ||
-    position === 'none';
-
-  if (skipAxisRendering) {
+  if (position === 'none') {
     return null;
   }
 
   const labelHeight = label ? getStringSize(label, axisLabelProps.style).height : 0;
 
-  const children =
-    'groups' in axis && Array.isArray(axis.groups) ? (
-      <ChartsGroupedXAxisTicks {...inProps} />
-    ) : (
-      <ChartsSingleXAxisTicks {...inProps} axisLabelHeight={labelHeight} />
-    );
+  const domain = xScale.domain();
+  const isScaleBand = isBandScale(xScale);
+  const skipTickRendering =
+    (isScaleBand && domain.length === 0) || (!isScaleBand && domain.some(isInfinity));
+  let children: React.ReactNode = null;
+
+  if (!skipTickRendering) {
+    children =
+      'groups' in axis && Array.isArray(axis.groups) ? (
+        <ChartsGroupedXAxisTicks {...inProps} />
+      ) : (
+        <ChartsSingleXAxisTicks {...inProps} axisLabelHeight={labelHeight} />
+      );
+  }
 
   const labelRefPoint = {
     x: left + width / 2,

@@ -79,18 +79,11 @@ export function ChartsYAxisImpl({ axis, ...inProps }: ChartsYAxisImplProps) {
     ownerState: {},
   });
 
-  const domain = yScale.domain();
-  const isScaleBand = isBandScale(yScale);
-  const skipAxisRendering =
-    (isScaleBand && domain.length === 0) ||
-    (!isScaleBand && domain.some(isInfinity)) ||
-    position === 'none';
-
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
   // - The position is set to 'none'.
-  if (skipAxisRendering) {
+  if (position === 'none') {
     return null;
   }
 
@@ -101,12 +94,20 @@ export function ChartsYAxisImpl({ axis, ...inProps }: ChartsYAxisImplProps) {
 
   const axisLabelHeight = label == null ? 0 : getStringSize(label, axisLabelProps.style).height;
 
-  const children =
-    'groups' in axis && Array.isArray(axis.groups) ? (
-      <ChartsGroupedYAxisTicks {...inProps} />
-    ) : (
-      <ChartsSingleYAxisTicks {...inProps} axisLabelHeight={axisLabelHeight} />
-    );
+  const domain = yScale.domain();
+  const isScaleBand = isBandScale(yScale);
+  const skipTickRendering =
+    (isScaleBand && domain.length === 0) || (!isScaleBand && domain.some(isInfinity));
+  let children: React.ReactNode = null;
+
+  if (!skipTickRendering) {
+    children =
+      'groups' in axis && Array.isArray(axis.groups) ? (
+        <ChartsGroupedYAxisTicks {...inProps} />
+      ) : (
+        <ChartsSingleYAxisTicks {...inProps} axisLabelHeight={axisLabelHeight} />
+      );
+  }
 
   return (
     <YAxisRoot

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useChartContext } from '../context/ChartProvider';
-import { AxisConfig, D3Scale } from '../models/axis';
+import { AxisConfig, D3ContinuousScale, D3Scale } from '../models/axis';
 import { isBandScale } from '../internals/isBandScale';
 import { isInfinity } from '../internals/isInfinity';
 
@@ -156,8 +156,10 @@ export function getTicks(
   if (domain.some(isInfinity)) {
     return [];
   }
+
   const tickLabelPlacement = tickLabelPlacementProp;
-  const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+  const ticks =
+    typeof tickInterval === 'object' ? tickInterval : getDefaultTicks(scale, tickNumber);
 
   // Ticks inside the drawing area
   const visibleTicks: TickItemType[] = [];
@@ -192,6 +194,15 @@ export function getTicks(
   return visibleTicks;
 }
 
+function getDefaultTicks(scale: D3ContinuousScale, tickNumber: number) {
+  const domain = scale.domain();
+  if (domain[0] === domain[1]) {
+    return [domain[0]];
+  }
+
+  return scale.ticks(tickNumber);
+}
+
 export function useTicks(
   options: {
     scale: D3Scale;

@@ -10,6 +10,13 @@ export function createScalarFormatter(tickNumber: number, zoomScale: D3Continuou
     context: AxisValueFormatterContext<S>,
   ): string {
     if (context.location === 'tick') {
+      const domain = context.scale.domain();
+      const zeroSizeDomain = domain[0] === domain[1];
+
+      if (zeroSizeDomain) {
+        return context.scale.tickFormat(1)(value);
+      }
+
       return context.scale.tickFormat(tickNumber)(value);
     }