Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow passing custom axis tick formatters to VisCanvas #1756

Merged
merged 1 commit into from
Feb 6, 2025
Merged

Conversation

axelboc
Copy link
Contributor

@axelboc axelboc commented Feb 5, 2025

Fix #1701

VisCanvas' internal tick formatter is meant as a good default:

  • It uses D3 with format .3~g to strongly limit the number of characters and prevent tick labels from overflowing.
  • It tells D3 to force exponent notation for numbers such as 0.00000123 (for which D3 doesn't respect the precision in g mode).
  • It skips rendering some tick labels in log scale when space is limited.

Unfortunately, this is far from perfect.

Finding the perfect tick formatting algorithm is just not possible, so the idea with this PR is to allow consumers of VisCanvas to implement one that works for their use case.

I think this opens the door to a lot of use cases. For instance, in the new VisCanvas story that demonstrates the use of formatTick, I pass a formatter that uses toFixed for decimal numbers, and toString for integers.

image

One could even imagine toggling between different tick formatters based on zoom level using a combination of useCameraState and an external store (since useCameraState can only be used inside VisCanvas).

@axelboc axelboc requested a review from loichuder February 5, 2025 14:52
@axelboc axelboc merged commit 8bdea9f into main Feb 6, 2025
8 checks passed
@axelboc axelboc deleted the tick-format branch February 6, 2025 08:22
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.

More accurate axis labels
2 participants