Skip to content

[Feature] Allow YAxis to render ticks from explicit domain+ticks when data is empty/all-null #7362

Description

@nlenepveu

Is your feature request related to a problem?

When a chart's data is entirely null/empty for a window (a real product case for analytics dashboards: a metric tile that's "quiet" for an interval), YAxis renders no ticks even when both domain and ticks are explicitly supplied. This breaks the "consistent frame" pattern dashboards rely on: each tile renders identical chrome (axes, gridlines, tick ladder) whether it has data or not, so the eye can scan a grid of tiles in one pass.

Today, when one tile in a 6-tile grid is empty, that tile collapses into a different visual (axis line only, no ladder) and the eye has to re-parse "loading vs broken vs empty" every time. You pay that cognitive cost continuously for the lifetime of the product.

Repro: pass data where every value for the YAxis-bound dataKey is null. Set explicit domain={[0, 100]}, ticks={[0, 25, 50, 75, 100]}, allowDataOverflow={true}. Result: the <g class="recharts-yAxis"> is in the DOM but contains zero tick-label children. v2 used to emit the ladder from domain alone.

(Tested on v3.8.1. PR #4433 / issue #4426 restored the axis line for the empty case but explicitly left tick rendering tied to data — this request is the missing half.)

Describe the solution you'd like

When YAxis has all of:

  • type="number"
  • explicit domain (e.g. [0, 100])
  • explicit ticks (or tickCount)
  • allowDataOverflow={true} (opt-in signal that the user really means "use my domain, ignore data")

…compute the scale from domain alone and render the ticks from the ticks prop, independent of whether any data point is numeric. That treats domain+ticks+allowDataOverflow as an explicit "scale spec independent of data," which is the missing primitive today.

This would let dashboards drop the workaround of injecting a hidden synthetic numeric series (<Line dataKey="__anchor" stroke="transparent" /> with __anchor values ramping 0→100) just to satisfy the scale calculator.

Describe alternatives you've considered

  1. Hidden anchor series (what we ship today): inject a synthetic dataKey with numeric values, render a transparent Line bound to it. Works, but leaks: the series appears in the tooltip payload, the synthetic key appears in legend lookups, and any reducer/scale-derivation code that walks the data has to know to skip __anchor. Each leak is its own bug.

  2. Conditional fallback UI: don't render the chart at all when empty; render a placeholder div with the empty-state copy. Maintainer-recommended in Empty Chart Display Possible? #345/Displaying placeholders when no data is available #430/Improvement: support a loader slot that could contain a chart skeleton or text #1707. But it breaks visual consistency — empty tiles now look fundamentally different from populated ones in a grid.

  3. tickCount + domain alone: doesn't work. Without data the scale never resolves, so neither computed ticks nor explicit ticks render.

  4. Copy-paste the axis SVG group into a sibling component with hide={true} on the chart's YAxis (Olio Apps blog). Heavy-handed and brittle — doubles the rendering work and requires keeping the two trees in sync.

Additional context

Related history:

The mental model shift: today, recharts treats data as the source of truth and domain as a clamp. For dashboard analytics, domain should be allowed to be the source of truth, with data filling in within that frame. The allowDataOverflow prop already hints at this direction — extending it to "permit a fully-empty data set when domain is explicit" would close the gap without a new API.

Metadata

Metadata

Labels

needs reproductionUse this label when an issue is submitted without proper reproduction

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions