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

Axis labels #100

Open
2 of 5 tasks
techniq opened this issue Feb 8, 2024 · 3 comments
Open
2 of 5 tasks

Axis labels #100

techniq opened this issue Feb 8, 2024 · 3 comments

Comments

@techniq
Copy link
Owner

techniq commented Feb 8, 2024

Add <Axis label="..."> to easily support adding labels

  • Easily rotate (for y axises)but not always (better readability)
    • Automatically rotates based on position (<Axis placement="left|right" labelPlacement="middle">)
  • Support start, middle, end placement (labelPlacement)
  • Automatically add arrows (unicode: ↑ →) for non-band scales, with option to disable (labelArrow)
  • Support changing the labelOffset
    • Currently based on chart padding (similar to Observable Plot)
  • Add label slot for greater control (markup, etc)

Observable Plot axis marks is a good reference

image

image

image

image

image

See also Nivo (bar, line)

image

@dit7ya
Copy link
Contributor

dit7ya commented May 22, 2024

Any progress on this one?

@techniq
Copy link
Owner Author

techniq commented May 22, 2024

@dit7ya yes... stay tuned (this week)

@techniq
Copy link
Owner Author

techniq commented May 22, 2024

@dit7ya Does this work for you 😁

top/bottom left/right
image image

techniq added a commit that referenced this issue May 23, 2024
* [Axis] Rename `labelProps` to `tickLabelProps` and `label` slot to `tickLabel`

* [Axis] Add label support. Resolves issue #100

* Add jsdoc comment
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

No branches or pull requests

2 participants