Skip to content

fix(CartesianAxis): render the axis line when there are no ticks#4433

Merged
ckifer merged 1 commit into
3.xfrom
fix/always-render-axis-line
Apr 18, 2024
Merged

fix(CartesianAxis): render the axis line when there are no ticks#4433
ckifer merged 1 commit into
3.xfrom
fix/always-render-axis-line

Conversation

@ckifer

@ckifer ckifer commented Apr 16, 2024

Copy link
Copy Markdown
Member

Description

Bug reported in linked issue where after recharts 2.5 the YAxis line would "disappear" with 0 data points or ticks, where it would previously show.

It would previously show because NaN was being calculated as a tick value and added to the dom as a tick item. This was fixed in #3454.

I would not call this a regression because as per the lines changed in this PR, the axis lines were never meant to show unless there were ticks. (See !finalTicks || !finalTicks.length). I believe however, that they should be able to.

Thus, this is a breaking change for both X and Y axes where even with 0 ticks or 0 valid data items, the axis lines will still render.

For a user to return to the old behavior of no Axis, they only have to do something simple like YAxis hide={data.length === 0} /> or use React convention and conditionally render it

Related Issue

#4426

Motivation and Context

  • It makes sense to show an axis line even when there are no ticks

How Has This Been Tested?

  • unit tests
  • see screenshot

Screenshots (if appropriate):

image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or extended an existing story to show my changes

@ckifer ckifer added the breaking change Use this label to indicate a breaking change in the Recharts API label Apr 16, 2024
Comment thread src/cartesian/YAxis.tsx
const width = useChartWidth();
const height = useChartHeight();
const axisOptions = useYAxisOrThrow(yAxisId);

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops

@codecov

codecov Bot commented Apr 16, 2024

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.04%. Comparing base (97f07f3) to head (9088fd8).

Additional details and impacted files
@@            Coverage Diff             @@
##              3.x    #4433      +/-   ##
==========================================
- Coverage   95.04%   95.04%   -0.01%     
==========================================
  Files         106      106              
  Lines       20723    20722       -1     
  Branches     2818     2820       +2     
==========================================
- Hits        19696    19695       -1     
  Misses       1021     1021              
  Partials        6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ckifer ckifer left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just going to ship this. Willing to defend it if anyone thinks its an issue

@ckifer
ckifer merged commit 1d60cc6 into 3.x Apr 18, 2024
@ckifer
ckifer deleted the fix/always-render-axis-line branch April 18, 2024 17:02
PavelVanecek pushed a commit that referenced this pull request May 30, 2026
… ticks on empty/all-null data (#7384)

## What

A single, TDD-style **red** spec —
`test/cartesian/YAxis/YAxis.7362.derivedDomain.spec.tsx` — documenting
the unresolved half of #7362. **Tests only; no `src/` changes** and no
behavior/contract change.

## Context

PR #7379 (`YAxis.7362.spec.tsx`) showed the **literal** case already
works: `type="number"` + `domain={[0, 100]}` + `ticks` (or `tickCount`)
+ `allowDataOverflow` renders the `0/25/50/75/100` ladder even when
every series value is `null` (or `data={[]}`).

This spec covers the case that does **not** work yet: a **function**
`domain`. A function bound already decides its own value — e.g. `[0,
(dataMax) => (Number.isFinite(dataMax) && dataMax > 0 ? dataMax : 100)]`
returns a finite `100` when there is no data. The desired behavior is
that recharts invokes that function even when the data domain is empty,
so the returned finite bounds resolve the scale and the explicit `ticks`
render — exactly like the literal case.

## Current behavior (the gap)

recharts skips function domains when there is no data domain:
- `numericalDomainSpecifiedWithoutRequiringData` returns `undefined` for
any function, and
- `parseNumericalUserDomain` only calls the function when `dataDomain !=
null`

(`src/util/isDomainSpecifiedByUser.ts`). With empty/all-null data the
data domain is `null`, so the function is never called and the axis
renders **0 ticks**.

## Why `it.fails`

The three specs assert the **desired** behavior (the ladder renders),
which currently throws — so `it.fails` passes and the suite stays green
while documenting the gap. They flip to **FAILING** the moment recharts
resolves a function domain without data, signalling it's time to drop
`.fails` and lock the behavior in.

Cases covered:
- function upper bound `[0, (dataMax) => …]`, all-null data
- function upper bound, empty `data={[]}`
- whole-domain function `() => [0, 100]`, all-null data

## Running

```
npm ci
npx vitest run --config vitest.config.mts test/cartesian/YAxis/YAxis.7362.derivedDomain.spec.tsx
```

Refs #7362. Related: #7379, #4433, #4426.

Signed-off-by: Nicolas <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Use this label to indicate a breaking change in the Recharts API

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant