Skip to content

Add @since 3.8 annotation to niceTicks, use it in website examples#7034

Merged
PavelVanecek merged 7 commits intomainfrom
copilot/add-since-annotation-niceticks
Feb 21, 2026
Merged

Add @since 3.8 annotation to niceTicks, use it in website examples#7034
PavelVanecek merged 7 commits intomainfrom
copilot/add-since-annotation-niceticks

Conversation

Copy link
Contributor

Copilot AI commented Feb 21, 2026

Description

Adds the @since 3.8 JSDoc annotation to the niceTicks prop on XAxis and YAxis, demonstrates the prop across multiple website example components, and fixes a pre-existing CI race condition that caused stale VR artifacts to be deployed.

JSDoc update (src/cartesian/XAxis.tsx, src/cartesian/YAxis.tsx):

  • Added @since 3.8 to the niceTicks prop documentation

Website examples — added niceTicks to the numerical axis/axes in:

  • AreaChart/SimpleAreaChart.tsx — both XAxis and YAxis
  • AreaChart/StackedAreaChart.tsx — both XAxis and YAxis
  • BarChart/StackedBarChart.tsx — both XAxis and YAxis
  • BarChart/MixBarChart.tsxYAxis (numerical axis)
  • BarChart/BrushBarChart.tsxYAxis (numerical axis)
  • Legend/LegendEffectOpacity.tsx — both XAxis and YAxis
  • Tooltip/CustomContentOfTooltip.tsx — both XAxis and YAxis
  • ComposedChart/LineBarAreaComposedChart.tsxYAxis (numerical axis)
  • ComposedChart/ScatterAndLineOfBestFit.tsx — both XAxis and YAxis (both are type="number")
  • ComposedChart/VerticalComposedChart.tsxXAxis only (the numerical axis in this chart)

CI workflow fix (.github/workflows/ci.yml):

  • Added concurrency: cancel-in-progress: true to cancel in-progress workflow runs when a new commit is pushed to the same branch. This fixes a pre-existing race condition where two simultaneous CI runs for the same PR could result in an older run's VR artifact being deployed after a newer run's, causing the deployed report to show stale results.

Related Issue

https://github.com/recharts/recharts/issuesniceTicks introduced in PR #7009

Motivation and Context

niceTicks was added in 3.8 but lacked a @since annotation and had no visible usage in the website examples, reducing its discoverability.

The CI race condition occurred because the workflow had no concurrency setting, allowing multiple pipeline runs for the same PR branch to proceed simultaneously. When commit 1 (affecting 2 charts) deployed its 6-failure VR report to gh-pages, and commit 2 (affecting 7 charts) then ran its VR tests, the CI log would show 21 failures while the deployed artifact still showed the stale 6-failure report from the earlier run.

How Has This Been Tested?

ESLint (react/jsx-boolean-value: "never") passes on all changed files. Existing example component tests cover the modified files.

Screenshots (if appropriate):

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 VR test, or extended an existing story or VR test to show my changes
Original prompt

This section details on the original issue you should resolve

<issue_title>Add @SInCE annotation to niceTicks, use it in website examples</issue_title>
<issue_description>In #7009 we have added a new prop niceTicks to XAxis and YAxis. Two tasks:

  • Add @since 3.8 annotation to the JSDoc
  • Locate 5 website examples (www/src/docs/exampleComponents) that use XAxis and 5 that use YAxis, and put niceTicks={true} prop to them so that we show off the new prop.</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

…each for XAxis and YAxis

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>
Copilot AI changed the title [WIP] Add @since annotation and update examples for niceTicks Add @since 3.8 annotation to niceTicks, use it in website examples Feb 21, 2026
Copilot AI requested a review from PavelVanecek February 21, 2026 03:59
@codecov
Copy link

codecov bot commented Feb 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.13%. Comparing base (d748806) to head (28307c3).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7034   +/-   ##
=======================================
  Coverage   90.12%   90.13%           
=======================================
  Files         526      526           
  Lines       39242    39253   +11     
  Branches     5438     5437    -1     
=======================================
+ Hits        35368    35379   +11     
  Misses       3865     3865           
  Partials        9        9           

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@github-actions
Copy link
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@PavelVanecek
Copy link
Collaborator

@copilot please also add niceTicks prop to the following examples:

  • StackedBarChart
  • MixBarChart
  • BrushBarChart
  • LineBarAreaComposedChart
  • ScatterAndLineOfBestFit
  • VerticalComposedChart (on XAxis because in this chart XAxis is the numerical axis)

…, ScatterAndLineOfBestFit, VerticalComposedChart

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 21, 2026

@copilot please also add niceTicks prop to the following examples:

  • StackedBarChart
    ...

Done in 89c0d33. Added niceTicks to:

  • StackedBarChart — already present from the previous commit
  • MixBarChart — added to YAxis (numerical axis)
  • BrushBarChart — added to YAxis (numerical axis)
  • LineBarAreaComposedChart — added to YAxis (numerical axis)
  • ScatterAndLineOfBestFit — added to both XAxis and YAxis (both are type="number")
  • VerticalComposedChart — added to XAxis only (the numerical axis, as noted)

@github-actions
Copy link
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@PavelVanecek
Copy link
Collaborator

@copilot I see that the visual regression log in CI says 21 failures

  21 failed
    [chromium] › test-vr/tests/www/AreaChartApiExamples.spec-vr.tsx:51:5 › StackedAreaChart ────────
    [chromium] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:79:5 › BrushBarChart ────────────
    [chromium] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:94:5 › MixBarChart ──────────────
    [chromium] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:99:5 › StackedBarChart ──────────
    [chromium] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:29:5 › ScatterAndLineOfBestFit 
    [chromium] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:39:5 › VerticalComposedChart 
    [chromium] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:49:5 › LineBarAreaComposedChart 
    [firefox] › test-vr/tests/www/AreaChartApiExamples.spec-vr.tsx:51:5 › StackedAreaChart ─────────
    [firefox] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:79:5 › BrushBarChart ─────────────
    [firefox] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:94:5 › MixBarChart ───────────────
    [firefox] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:99:5 › StackedBarChart ───────────
    [firefox] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:29:5 › ScatterAndLineOfBestFit 
    [firefox] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:39:5 › VerticalComposedChart 
    [firefox] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:49:5 › LineBarAreaComposedChart 
    [webkit] › test-vr/tests/www/AreaChartApiExamples.spec-vr.tsx:51:5 › StackedAreaChart ──────────
    [webkit] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:79:5 › BrushBarChart ──────────────
    [webkit] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:94:5 › MixBarChart ────────────────
    [webkit] › test-vr/tests/www/BarChartApiExamples.spec-vr.tsx:99:5 › StackedBarChart ────────────
    [webkit] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:29:5 › ScatterAndLineOfBestFit 
    [webkit] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:39:5 › VerticalComposedChart ─
    [webkit] › test-vr/tests/www/ComposedChartApiExamples.spec-vr.tsx:49:5 › LineBarAreaComposedChart 

But the uploaded artifact says 6 failures. Looks like the first artifact gets uploaded, and your next commit was correct but the VR result is stale. Why is that? Please look at the workflow files. This is not related to your changes, looks like an pre-existing problem.

…act deployments

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 21, 2026

@copilot I see that the visual regression log in CI says 21 failures

...

The race condition is caused by two simultaneous CI runs for the same PR branch with no concurrency cancellation.

What happened:

  • Commit f4c5037 (niceTicks on 5 files) triggered CI Run 1 → 2 charts changed visually → 6 VR failures (2 × 3 browsers). Its deploy_staging job finished and pushed to gh-pages.
  • Commit 89c0d33 (niceTicks on 5 more files) triggered CI Run 2 → 7 charts changed visually → 21 VR failures (7 × 3 browsers). Its vr_tests job failed in the CI log, but deploy_staging hadn't deployed yet.

At the moment you looked: the CI log showed 21 failures (from Run 2 just completing vr_tests) while gh-pages still showed 6 failures (from Run 1's earlier deploy). Both runs proceeded simultaneously because the workflow had no concurrency setting.

Fix applied in 28307c3: Added concurrency: cancel-in-progress: true to the CI workflow. Now pushing a new commit cancels any still-running older CI run for the same branch, eliminating the stale-artifact race condition.

@github-actions
Copy link
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@PavelVanecek
Copy link
Collaborator

/update-snapshots

1 similar comment
@PavelVanecek
Copy link
Collaborator

/update-snapshots

@codecov
Copy link

codecov bot commented Feb 21, 2026

Bundle Report

Bundle size has no change ✅

@PavelVanecek PavelVanecek force-pushed the copilot/add-since-annotation-niceticks branch from 4a9e6fc to d5390ff Compare February 21, 2026 10:49
@PavelVanecek
Copy link
Collaborator

/update-snapshots

@PavelVanecek
Copy link
Collaborator

/update-snapshots

@github-actions
Copy link
Contributor

✅ Visual regression snapshots have been updated and committed to this PR.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Looking at the diff makes me think that the new niceTicks algorithm is ... not strictly better, it's different. I don't see it as a replacement, more like an alternative. Perhaps we should continue supporting both, and have a prop that switches between them. What do you think @ckifer ?

Copy link
Member

Choose a reason for hiding this comment

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

It mostly just adds more Y value so it can get to nicer numbers lol. There is a prop and it's default off right?

But yeah "nice" is actually kind of confusing because nice is subjective. We could have recharts nice and d3 nice

Copy link
Member

Choose a reason for hiding this comment

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

Maybe like when domain is auto we can have an auto tick type "nice" and "d3-nice" idk that isn't super clear but the idea works

Copy link
Collaborator

Choose a reason for hiding this comment

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

@MaxGhenis what do you think?

Copy link
Collaborator

Choose a reason for hiding this comment

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

@PavelVanecek PavelVanecek marked this pull request as ready for review February 21, 2026 13:59
@PavelVanecek PavelVanecek merged commit 878cf36 into main Feb 21, 2026
3 checks passed
@PavelVanecek PavelVanecek deleted the copilot/add-since-annotation-niceticks branch February 21, 2026 21:52
@PavelVanecek PavelVanecek mentioned this pull request Feb 26, 2026
PavelVanecek added a commit that referenced this pull request Feb 26, 2026
We have merged #6916 and
#7034 but they affected each
other and now we have semantic conflict in main branch so let's fix it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add @since annotation to niceTicks, use it in website examples

3 participants