Skip to content

Commit a4363a0

Browse files
committed
document multi-line tick format
(ref: #1718, #1725)
1 parent 634c8dd commit a4363a0

File tree

1 file changed

+3
-15
lines changed

1 file changed

+3
-15
lines changed

docs/marks/axis.md

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -143,34 +143,22 @@ Plot.plot({
143143
```
144144
:::
145145

146-
You can emulate [Datawrapper’s time axes](https://blog.datawrapper.de/new-axis-ticks/) using `\n` (the line feed character) for multi-line tick labels, plus a bit of date math to detect the first month of each year.
146+
Time axes default to a consistent multi-line tick format, [à la Datawrapper](https://blog.datawrapper.de/new-axis-ticks/), for example showing the first month of each quarter, and the year:
147147

148148
:::plot https://observablehq.com/@observablehq/plot-datawrapper-style-date-axis
149149
```js
150150
Plot.plot({
151+
x: {tickSpacing: 60},
151152
marks: [
152153
Plot.ruleY([0]),
153154
Plot.line(aapl, {x: "Date", y: "Close"}),
154155
Plot.gridX(),
155-
Plot.axisX({
156-
ticks: 20,
157-
tickFormat: (
158-
(formatYear, formatMonth) => (x) =>
159-
x.getUTCMonth() === 0
160-
? `${formatMonth(x)}\n${formatYear(x)}`
161-
: formatMonth(x)
162-
)(d3.utcFormat("%Y"), d3.utcFormat("%b"))
163-
})
164156
]
165157
})
166158
```
167159
:::
168160

169-
:::tip
170-
In the future, Plot may generate multi-line time axis labels by default. If you’re interested in this feature, please upvote [#1285](https://github.com/observablehq/plot/issues/1285).
171-
:::
172-
173-
Alternatively, you can add multiple axes with options for hierarchical time intervals, here showing weeks, months, and years.
161+
The format is inferred from the tick interval, and consists of two fields (*e.g.*, month and year, day and month, minutes and hours…); when a tick has the same second field value as the previous tick (*e.g.*, “19 Jan” after “17 Jan”), only the first field (“19”) is shown for brevity. Alternatively, you can specify multiple explicit axes with options for hierarchical time intervals, here showing weeks, months, and years.
174162

175163
:::plot https://observablehq.com/@observablehq/plot-multiscale-date-axis
176164
```js

0 commit comments

Comments
 (0)