observablehq / observablehq/plot

How to offset an axis label

Open
#1,414 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug enhancement
Dominant language
HTML
Stars
5.4k
Forks
244
PR merge metrics
No merged PRs in 30d

Description

labelOffset moves the axis label in the direction orthogonal to the axis (say horizontally for the y axis). But how would you move it in the direction of the axis?

Suppose you want to move the axis label down (because there is a scale.insetTop or a large marginTop).

A hacky solution (implemented in https://observablehq.com/@recifs/a-centered-title) is an explicit label with lots of \n (spaces if working on the x axis)

Plot.axisY({ label: "\n\n\n\n\n↑ flipper_length_mm" }),

Similarly, a text mark with facetAnchor+frameAnchor.

Note: dy doesn't apply to the axis label (this is probably a bug in itself? this was intentional); if this worked, we could create a specific axis just for the label, and offset it. It would be tedious, but would benefit from the automatic label.

I think we should:

  • fix the bug with dy (#1517)
  • introduce a new option orthogonal to labelOffset (name?) (#1516)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue does not name files or tests. Start by reviewing the axis-label API and the related work referenced in #1516 and #1517; done means axis labels can be positioned along the axis without newline or spacing hacks.

Written by the indexing model from the issue text.

Assessment

Domain
data-visualization
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.