# observable plot cell and date label

**URL:** <https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116>\
**Category:** Help\
**Created:** [July 22, 2023, 1:45pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116 "2023-07-22T13:45:16Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![aborruso](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aborruso/32/4334_2.png) [@aborruso](https://talk.observablehq.com/u/aborruso)\
**Post date:** [July 22, 2023, 1:45pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/1 "2023-07-22T13:45:16Z")

</div>

Hi,  
I’m building [this heat map](https://observablehq.com/d/ed74fd6690651923#cell-11) starting from [this template](https://observablehq.com/@observablehq/plot-sorted-heatmap).

I have a date field (the name is `data`, and it’s in YYYY-MM-DD format), and I use it to put labels in x axis.

Currently I put the day number:

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/2adf25fcc05a0a193d8c84e5908ae701f81d4495.png)

But I would like to have labels both with month and day, as those I have by default in a [standard line chart](https://observablehq.com/d/ed74fd6690651923#cell-99), based on the same data.

How to format the date, in the same way in a plot cell chart?

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/616f15f1a92b92985ee2869967ea34130c238de3.png)

Thank you

---

<div class="post-metadata">

**Author:** ![thehogfather](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thehogfather/32/7163_2.png) [@thehogfather](https://talk.observablehq.com/u/thehogfather)\
**Post date:** [July 22, 2023, 1:58pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/2 "2023-07-22T13:58:34Z")

</div>

Try the suggestions below. Not exactly the orientation you want but should set you in the right direction. This reference is also useful [GitHub - d3/d3-time-format: Parse and format times, inspired by strptime and strftime.](https://github.com/d3/d3-time-format)

````auto
Plot.plot({
  marginLeft: 120,
  padding: 0,
  color: {
    domain: [0, 1, 2, 3],
    range: ["#5bd601", "#e8d203", "#ff7f02", "#c40001"]
  },
  y: { label: null },
  x: {
    tickFormat: "%b %d",
    tickRotate: -90,
  },
  marks: [
    Plot.cell(
      citta,
      Plot.group(
        { fill: "max" },
        {
          x: (d) => d.data,
          y: "citta",
          fill: "livello_n",
          inset: 1,
          tip: false
        }
      )
    )
  ]
})```
````

---

<div class="post-metadata">

**Author:** ![aborruso](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aborruso/32/4334_2.png) [@aborruso](https://talk.observablehq.com/u/aborruso)\
**Post date:** [July 22, 2023, 2:37pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/3 "2023-07-22T14:37:57Z")

</div>

> [@thehogfather](#):
>
> Try the suggestions below. Not exactly the orientation you want but should set you in the right direction.

Extremely useful, thank you very much.

I would like to have the short month name in my language, Italian. How to add this setting?

---

<div class="post-metadata">

**Author:** ![thehogfather](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/thehogfather/32/7163_2.png) [@thehogfather](https://talk.observablehq.com/u/thehogfather)\
**Post date:** [July 22, 2023, 3:09pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/4 "2023-07-22T15:09:19Z")

</div>

You can set up a customer locale format and use it in the chat like so

```auto
dateformat = {
  const locale = await fetch(
    `https://unpkg.com/d3-time-format@2/locale/${"it-IT.json"}`
  );
  const localeJSON = await locale.json();
  const timeformat = d3.timeFormatDefaultLocale(localeJSON);
  return timeformat.format("%d %b");
}

```

And call the dateformat with the data

```auto
        tickFormat: (d) => dateformat(d),

```

---

<div class="post-metadata">

**Author:** ![aborruso](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aborruso/32/4334_2.png) [@aborruso](https://talk.observablehq.com/u/aborruso)\
**Post date:** [July 22, 2023, 3:34pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/5 "2023-07-22T15:34:55Z")

</div>

Thank you very much @thehogfather , extremely useful

---

<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:** [July 23, 2023, 3:34pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/6 "2023-07-23T15:34:54Z")

</div>

These days I recommend using the browser’s built-in [localized date formatting](https://observablehq.com/@mbostock/date-formatting) (_date_.toLocaleString) instead of using d3-time-format; the browser has a much richer API and all the locales are built-in so you don’t have to load another locale definition. Also using d3.timeFormatDefaultLocale in particular is tricky because it changes the default locale; therefore D3’s behavior depends on the order in which cells are evaluated.

You can also mimic the multi-line format that Plot now uses by default for time-series axes like so, which is nice because then you don’t need to rotate the labels, improving readability:

 ![calendario](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/91492001518affa3af79fb49025f85c070969cb0.png)

```js
Plot.plot({
  x: {
    tickFormat(x, i, X) {
      const format1 = (x) => x.toLocaleString("it", { day: "numeric" });
      const format2 = (x) => x.toLocaleString("it", { month: "short" });
      const f1 = format1(x);
      const f2 = format2(x);
      return i > 0 && f2 === format2(X[i - 1]) ? f1 : [f1, f2].join("\n");
    },
    label: null,
    type: "band"
  },
  marks: …
})

```

---

<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:** [July 23, 2023, 6:10pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/7 "2023-07-23T18:10:18Z")

</div>

A post was merged into an existing topic: [observable plot cell: how to order y axis by a specific field](https://talk.observablehq.com/t/observable-plot-cell-how-to-order-y-axis-by-a-specific-field/8120/4)

---

<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:** [July 31, 2023, 1:34pm UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/8 "2023-07-31T13:34:02Z")

</div>

Sorry to jump on this bandwagon: an alternative is to use a continuous (utc) scale for _x_, and benefit from the new default time axes:

```auto
Plot.plot({
  marginLeft: 120,
  marginBottom: 60,
  padding: 0,
  color: {
    domain: [0, 1, 2, 3],
    range: ["#5bd601", "#e8d203", "#ff7f02", "#c40001"]
  },
  y: { label: "Città, da Nord a Sud" },
  marks: [
    Plot.barX(diecigiorni, {
      x: "data",
      interval: "day",
      y: "citta",
      fill: "livello_n",
      inset: 1,
      tip: true,
      sort: {
        y: "-data",
        reduce: ([d]) => d.latitude
      }
    }),
  ]
})

```

Here we use a **barX** mark, with the **interval** : day option that generates 1-day long bars. See also [centered/aligned intervals? · Issue #1774 · observablehq/plot · GitHub](https://github.com/observablehq/plot/issues/1774)

---

<div class="post-metadata">

**Author:** ![aborruso](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aborruso/32/4334_2.png) [@aborruso](https://talk.observablehq.com/u/aborruso)\
**Post date:** [August 3, 2023, 9:47am UTC](https://talk.observablehq.com/t/observable-plot-cell-and-date-label/8116/9 "2023-08-03T09:47:29Z")

</div>

> [@Fil](#):
>
> Sorry to jump on this bandwagon: an alternative is to use a continuous (utc) scale for _x_, and benefit from the new default time axes:

Wow, really useful!!

Thank you