# How to wrap long tick text in Observablehq using the Plot.plot function?

**URL:** <https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997>\
**Category:** Help\
**Created:** [September 5, 2022, 2:18pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997 "2022-09-05T14:18:31Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![dergroncki](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dergroncki/32/6903_2.png) [@dergroncki](https://talk.observablehq.com/u/dergroncki)\
**Post date:** [September 5, 2022, 2:18pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/1 "2022-09-05T14:18:31Z")

</div>

How to wrap long tick text in Observable using the Plot.plot function? Can I use tickFormat for this?

 ![Screenshot 2022-09-05 at 15.47.14](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/2bd43c48bfb37de24ea0e7f7549fde94491bab5e.jpeg)

With D3 I solved it like this. How can I solve this with the Plot.plot function?

```javascript
svg.select(".x_axis")
      .call(xAxis.tickFormat(d3.timeFormat("%d-%m-%Y %H:%M:%S")))
      .selectAll("text")
      .call(function (t) {
        t.each(function (d) {
          var self = d3.select(this);
          var s = self.text().split(' ');
          self.text(null);
          self.append("tspan")
            .attr("x", 0)
            .attr("dy", ".8em")
            .text(s[0]);
          self.append("tspan")
            .attr("x", 0)
            .attr("dy", "1.2em")
            .text(s[1]);
        })
      });

```

Edit: [Link to notebook](https://observablehq.com/@dergroncki/data-plot)

Thank you.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [September 5, 2022, 2:35pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/2 "2022-09-05T14:35:18Z")

</div>

I think you can use similar regex commands in Plot to introduce a line break where there is a comma (e.g. similar to where you used `self.text().split(' ')` in the D3 example)… and removing rotation is right there on `tickRotate`. As your current `tickFormat` code shows, plot is able to accept regular JavaScript to control outputs.

Would you be able to share your notebook rather than a view of a partial code snippet so that others can make direct suggestions?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [September 5, 2022, 3:41pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/3 "2022-09-05T15:41:34Z")

</div>

We have been discussing this at [Multi-line tick labels · Issue #460 · observablehq/plot · GitHub](https://github.com/observablehq/plot/issues/460) but there is no official support yet. The idea would be to consider newlines in the tick format to, well, create a new line, as we do in Plot.text. Drafts are available at [multiline ticks labels, draft by Fil · Pull Request #609 · observablehq/plot · GitHub](https://github.com/observablehq/plot/pull/609) and [multiline tick labels by Fil · Pull Request #83 · d3/d3-axis · GitHub](https://github.com/d3/d3-axis/pull/83)

_(duplicated answer from [d3.js - How to wrap long tick text in Observablehq using the Plot.plot function? - Stack Overflow](https://stackoverflow.com/questions/73610621/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function))_

---

<div class="post-metadata">

**Author:** ![dergroncki](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dergroncki/32/6903_2.png) [@dergroncki](https://talk.observablehq.com/u/dergroncki)\
**Post date:** [September 5, 2022, 5:09pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/4 "2022-09-05T17:09:24Z")

</div>

Will that be released at some point? Any workaround?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [September 5, 2022, 5:36pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/5 "2022-09-05T17:36:09Z")

</div>

Yes I hope we’ll eventually get to it! Feedback is precious in that regard.

As for a workaround, well, it’s always possible to do some kind of post processing on the svg that is returned by Plot, going through the ticks and adding tspan nodes. I’m sorry I don’t have an example at hand, but it would be very similar to the way you do it with plain D3.

In the meantime, if you want to share your notebook, please publish it (“unlisted”).

---

<div class="post-metadata">

**Author:** ![dergroncki](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dergroncki/32/6903_2.png) [@dergroncki](https://talk.observablehq.com/u/dergroncki)\
**Post date:** [September 6, 2022, 4:27pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/6 "2022-09-06T16:27:30Z")

</div>

With the hint from @Fil and some D3 code, I was now able to label the x-axis markers in two lines. Please take a look at my notebook [Data plot](https://observablehq.com/@dergroncki/data-plot). Feedback welcome.

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [September 6, 2022, 4:51pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/7 "2022-09-06T16:51:50Z")

</div>

Just checking whether you republished the updated notebook? I don’t see the 2 lines…

---

<div class="post-metadata">

**Author:** ![dergroncki](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dergroncki/32/6903_2.png) [@dergroncki](https://talk.observablehq.com/u/dergroncki)\
**Post date:** [September 6, 2022, 5:10pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/8 "2022-09-06T17:10:14Z")

</div>

Thanks for the hint. I have now rebublished it.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [September 6, 2022, 5:26pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/9 "2022-09-06T17:26:41Z")

</div>

That’s great! I think it’s worth mentioning that you can combine the plot generation and modification into one cell. The advantage is that you can avoid the use of a [side-effect](https://observablehq.com/@mootari/cell-side-effects).

The combined cell might look something like this:

```
plot = {
  let dataPlot = Plot.plot({
    grid: true,
    x: {
      ticks: 10,
      tickFormat: (d) => new Date(d * 1000).toLocaleString("de-DE"),
      tickRotate: 0,
      label: "Date and time →"
    },
    y: {
      ticks: 8,
      label: "↑ Temperature (°C)",
      domain: [14, 32]
    },
    marks: [
      Plot.ruleY([0]),
      Plot.lineY(curveData, {
        x: "date",
        y: "temperature",
        curve: "catmull-rom",
        marker: "circle"
      })
    ],
    marginTop: 20,
    marginBottom: 50
  });

  //Add Multi-line tick labels to the chart
  d3
    .select(dataPlot)
    .select('[aria-label="x-axis"]')
    .selectAll("text")
    .call(function (t) {
      t.each(function (d) {
        var self = d3.select(this);
        var s = new Date(d * 1000).toLocaleString("de-DE").split(",");
        self.text(null);
        self.append("tspan").attr("x", 0).attr("dy", ".8em").text(s[0]);
        self.append("tspan").attr("x", 0).attr("dy", "1.2em").text(s[1]);
      });
    });

  return dataPlot
}

```

---

<div class="post-metadata">

**Author:** ![dergroncki](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dergroncki/32/6903_2.png) [@dergroncki](https://talk.observablehq.com/u/dergroncki)\
**Post date:** [September 7, 2022, 7:23am UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/10 "2022-09-07T07:23:30Z")

</div>

Thank you for sharing this.

---

<div class="post-metadata">

**Author:** ![urswilke](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/urswilke/32/7780_2.png) [@urswilke](https://talk.observablehq.com/u/urswilke)\
**Post date:** [April 3, 2024, 12:17pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/11 "2024-04-03T12:17:36Z")

</div>

@dergroncki The added line breaks in your notebook didn’t work anymore. Probably due to some changes in the generated svg in a later version of observable plot (?).

I slightly modified your notebook [here](https://observablehq.com/d/05987ccb75ce6d50) to make it work.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 3, 2024, 4:01pm UTC](https://talk.observablehq.com/t/how-to-wrap-long-tick-text-in-observablehq-using-the-plot-plot-function/6997/12 "2024-04-03T16:01:54Z")

</div>

The current version of Plot generates multi-line time axes by default, so you shouldn’t have to do any additional work to get pretty axes.

 ![untitled - 2024-04-03T085822.600](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/dce7e9b9ec3f989d861deb5bfdec21b8198348cd.png)

```js
Plot.plot({
  grid: true,
  y: {
    label: "↑ Temperature (°C)",
    domain: [14, 32]
  },
  marks: [
    Plot.ruleY([0]),
    Plot.lineY(curveData, {
      x: (d) => new Date(d.date * 1000),
      y: "temperature",
      curve: "catmull-rom",
      marker: "circle",
      stroke: "red"
    })
  ]
})

```

(And really, you should say `x: "date"` instead of `x: (d) => new Date(d.date * 1000)`, but you’ll need to fix the data so that the `date` field is declared as Date objects instead of numbers.)

If you want to customize the format, you can return a string with newlines (`\n`) from the **tickFormat** option. For example:

 ![plot (1)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/5a2973e1d113308f489f248f7691da66a125b0f7.png)

```js
Plot.plot({
  grid: true,
  x: {
    tickFormat(d) {
      const [a, b] = d.toLocaleString("de-DE").split(",");
      return `${a}\n${b}`;
    }
  },
  y: {
    label: "↑ Temperature (°C)",
    domain: [14, 32]
  },
  marks: [
    Plot.ruleY([0]),
    Plot.lineY(curveData, {
      x: (d) => new Date(d.date * 1000),
      y: "temperature",
      curve: "catmull-rom",
      marker: "circle",
      stroke: "red"
    })
  ]
})

```

I wouldn’t use the DOM modification (`d3.select`) approach unless you really need it, as it’s much lower level than using Plot’s built-in features.