Charts: Test and document that bar chart grids follow each axis's numTicks

[LiamSarsfield]

BOOST-709 — the fix itself landed in #52588.

Proposed changes

• No code change. Charts: Tick a small whole-number value axis only on whole numbers #52588 ("Charts: Tick a small whole-number value axis only on whole numbers") passed each axis's numTicks to its Grid along the way, which is exactly what this PR opened to do, so the bar-chart.tsx hunk is dropped and the branch is rebased onto that.
• Keeps the coverage Charts: Tick a small whole-number value axis only on whole numbers #52588 did not add. Its test asserts countColumns( 15 ) > countColumns( 4 ) — monotonicity on the band axis, which still passes if the grid and the axis disagree. These assert grid line positions equal axis tick positions, on both axes and both orientations.
• Fixes the API doc sentence, which still said grid lines follow tickValues alone and never mentioned numTicks. Charts: Tick a small whole-number value axis only on whole numbers #52588 did not touch it.

Related product discussion/links

• Charts: Tick a small whole-number value axis only on whole numbers #52588

Does this pull request change what data or activity we track or use?

No.

Testing instructions

• jp test js js-packages/charts — 179 bar-chart tests pass.
• To see the new tests earn their place, revert the two numTicks={ chartOptions.axis.{x,y}.numTicks } props in bar-chart.tsx to numTicks={ 4 }: both "aligns an explicit tick count" cases fail, and pass again when restored.
• Storybook → Bar Chart → API: the grid line paragraph at the bottom now names numTicks as well as tickValues.

No screenshots: this PR changes no rendered output. The visual change shipped with #52588.

🤖 Generated with Claude Code

https://claude.ai/code/session_017vAVZ6qLAJ7AR2UujogThA

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the fm/boost-709-charts-grid-ticks branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fm/boost-709-charts-grid-ticks

bin/jetpack-downloader test jetpack-mu-wpcom-plugin fm/boost-709-charts-grid-ticks

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly:
  • Scheduled release: October 6, 2026

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/videopress/src/client/components/chapters-editor/preview/use-preview-playback.ts	126/148 (85.14%)	-1.35%	2 ❤️‍🩹

Full summary · PHP report · JS report

[xavier-lc]

Reviewed at 6d24e24. The mechanism checks out: @visx/grid's GridColumns and @visx/axis's Axis both resolve ticks through the same @visx/scale getTicks( scale, numTicks ), including the band-scale branch that samples the domain by index % round( ( n - 1 ) / numTicks ) — so handing both the same count makes them agree for band and linear scales alike.

One consumer is actually affected: packages/podcast's downloads chart (numTicks: min( days, 15 ), gridVisibility="y"). My Jetpack sets axis.x.numTicks: 7 but renders only row grid lines, driven by axis.y, which has no numTicks — unchanged. Boost, Premium Analytics, Publicize and VideoPress pass no numTicks at all, so no Boost entry is needed.

No blockers. Five suggestions:

1. ?? 4 can cause the misalignment this PR fixes. L641, L647

useBarChartOptions already defaults both axes to numTicks: DEFAULT_NUM_TICKS, so the fallback never fires on a normal path. The one case it does fire is a caller passing an explicit numTicks: undefined (numTicks: maybeCount), which clobbers the hook default through ...xAxisOptions — the hazard the hook's own comment calls out for tickFormat. There the axis falls through to visx's default of 10 while the grid takes 4, and they disagree again. Dropping the fallback fixes that case and removes the second copy of the default:

-numTicks={ chartOptions.axis.x.numTicks ?? 4 }
+numTicks={ chartOptions.axis.x.numTicks }

2. The new test comment restates one already in the file. L439-L440

Line 41 already says "visx renders bars and grid lines without accessible roles or configurable test IDs", and the file's other two disables point back at it rather than repeating it. Matching them also restores the -- justification this one is missing:

-// Visx renders grid and tick lines without configurable test IDs or accessible roles.
-// eslint-disable-next-line testing-library/no-node-access
+// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.

3. The Jetpack changelog entry is written from the implementation. podcast-bar-chart-grid-tick-count

"column-grid lines" and "tick counts" are visx vocabulary, and this line lands in readme.txt. Something like "Podcast: Align the download chart's grid lines with its date labels." says the same thing to whoever reads it there.

4. Consider an entry in packages/jetpack-mu-wpcom — judgment call. Podcast reaches Simple through Jetpack_Mu_Wpcom::load_podcast() → Podcast::init() → Admin_Page::init(), so a Simple site owner sees this chart. Per AGENTS.md, mu-wpcom-plugin's own changelog is not a product record and what a Simple owner would notice belongs in the package's entry. The counter-reading is that the charts entry already covers it and this is two hops from the changed project — worth a deliberate call either way.

5. One screenshot would be worth it. With xNumTicks = min( days, 15 ), a 30-day range goes from 5 vertical grid lines to 15 (round( 29 / 4 ) = 7 → 5 lines, vs round( 29 / 15 ) = 2 → 15), and 90 days likewise 5 → 15. That is the intent, but tripling the grid density on the Podcast dashboard is worth seeing before merge rather than resting on the rendered-chart tests.

On the tests themselves: both would fail without the fix — the x case is not vacuous despite x being the band axis, because visx samples band domains by numTicks too (8 bars at numTicks: 2 → indices 0, 4, against the old 0, 2, 4, 6). toHaveLength( 5 ) is fixture-coupled but earns its place: it separates "both got 4" from "both fell through to visx's 10", which grid === ticks alone would not.

[LiamSarsfield]

Thanks for the review. All five are applied in 3e4ebd2:

1. Dropped both ?? 4 fallbacks; the grid now takes exactly the numTicks the axis gets, so an explicit undefined can no longer split them.
2. Replaced the new test comment with the file's pattern: eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
3. Reworded the Jetpack entry to "Podcast: Align the download chart's grid lines with its date labels."
4. Added the same entry to packages/jetpack-mu-wpcom, since Simple site owners reach this chart through that package.
5. Added before/after screenshots at 30 and 90 days to the PR body: 5 grid lines that miss the labels before, 15 that line up after.

[xavier-lc]

LGTM!

[Copilot]

Copilot review overview

🟡 Changes recommended

Address the requested changelog and documentation updates and reconcile the stated Boost scope with the Podcast-focused implementation.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

• Move grid guidance to index.docs.mdx · New

What changed in this PR

Updates the shared BarChart to align grid lines with configured axis tick counts while preserving the default behavior.

Changes:

• Propagates axis tick counts to corresponding grids.
• Adds explicit and default-count alignment tests.
• Updates documentation and downstream changelogs.

File	Summary
projects/​plugins/​jetpack/​changelog/​podcast-bar-chart-grid-tick-count	Adds a Jetpack-facing changelog entry.
projects/​packages/​jetpack-mu-wpcom/​changelog/​podcast-bar-chart-grid-tick-count	Adds a WordPress.com-facing changelog entry.
projects/​js-packages/​charts/​src/​charts/​bar-chart/​test/​bar-chart.test.tsx	Tests explicit and default grid tick counts.
projects/​js-packages/​charts/​src/​charts/​bar-chart/​stories/​index.api.mdx	Documents grid tick behavior.
projects/​js-packages/​charts/​src/​charts/​bar-chart/​bar-chart.tsx	Passes configured axis tick counts to grids.
projects/​js-packages/​charts/​changelog/​bar-chart-grid-tick-count	Records the shared Charts package change.

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.