# Plot Date Tooltip Without Daylights Savings Time

**URL:** <https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930>\
**Category:** Help\
**Created:** [March 15, 2024, 7:17pm UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930 "2024-03-15T19:17:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![badpackage](https://avatars.discourse-cdn.com/v4/letter/b/278dde/32.png) [@badpackage](https://talk.observablehq.com/u/badpackage)\
**Post date:** [March 15, 2024, 7:17pm UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930/1 "2024-03-15T19:17:54Z")

</div>

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

I’m trying to plot a line chart with dates on the x-axis. Here is the code.

```auto
Plot.plot({
    color: {
      range: ["#193278", "#781932", "#197832", "#a96323"]
    },
    x: {
      type: "time"
    },
    y: {
      type: "linear",
      grid: true,
      domain: [0, 2100]
    },
    marks: [
        Plot.line(df, {
          x: "date", 
          y: "running_case_count",
          tip: true,
          stroke: "topic",
          title: d => `Category: ${d.topic}\nDate: ${d.date}\nCases: ${d.running_case_count}`
      })
    ]
  })
)}

```

The dates are in YMD format; however, for whatever reason, Observable Plot wants to account for timezone differences starting on Nov. 4th and lists the dates with hours, which completely breaks the readability of the tooltip. I have a near identical chart to this one, with nearly the same exact code and the same exact datatypes, but it does _not_ do this for whatever reason.

```auto
Plot.plot({
    color: {
      range: ["#193278", "#781932", "#197832", "#a96323"]
    },
    x: {
      type: "time"
    },
    y: {
      type: "linear",
      grid: true,
      domain: [0, 2100]
    },
    marks: [
        Plot.line(df, {
          x: "date", 
          y: "running_credit_total",
          tip: true,
          stroke: "topic",
          title: d => `Category: ${d.topic}\nDate: ${d.date}\nCredits: ${d.running_credit_label}`
      })
    ]
  })
)}

```

This labels the dates in YMD format, unlike the other that attempts to convert to written months. Is there a way to disable timezones from appearing on dates, and is there a reason why it shows on one and not the other given the formats are identical (YYYY-MM-DD)

---

<div class="post-metadata">

**Author:** ![badpackage](https://avatars.discourse-cdn.com/v4/letter/b/278dde/32.png) [@badpackage](https://talk.observablehq.com/u/badpackage)\
**Post date:** [March 15, 2024, 7:18pm UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930/2 "2024-03-15T19:18:56Z")

</div>

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

Here is how the second plot gets displayed

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 16, 2024, 12:03am UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930/3 "2024-03-16T00:03:26Z")

</div>

That seems unrelated to Plot, to be honest. In your title string you interpolate a Date object which converts it to a string by calling [Date.toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString).

If you want to format the date in a specific way you’ll either have to omit the title so that the channels get displayed instead, or format the date through one of the native methods (e.g. t[oLocaleDateString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)) or [d3.timeFormat](https://d3js.org/d3-time-format#timeFormat).

A common shorthand for UTC dates is

```js
date.toISOString().slice(0, 10)

```

Can you share a sample of your data?

---

<div class="post-metadata">

**Author:** ![badpackage](https://avatars.discourse-cdn.com/v4/letter/b/278dde/32.png) [@badpackage](https://talk.observablehq.com/u/badpackage)\
**Post date:** [March 18, 2024, 6:56pm UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930/4 "2024-03-18T18:56:06Z")

</div>

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

Here is a slice of the data I’m working with. I was able to get the dates formatted correctly by adding the fix you posted to the title.

```auto
title: d => `Category: ${d.sc1}\nDate: ${d.date.toISOString().slice(0, 10)}\nMaterial Cost: ${d.running_material_cost}`

```

This gets the data in YYYY-MM-DD format which is more-or-less what I want. I thought the fix would come from changing the x-variable type from _time_ to something else, but the problem seems to be with how values are displayed on title if I’m understanding correctly. I’m still not sure why it displays fine for the second chart, though, because the formatting is identical and I didn’t have to format the date. Either way, thank you for the help.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 18, 2024, 7:15pm UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930/5 "2024-03-18T19:15:54Z")

</div>

> I’m still not sure why it displays fine for the second chart

Is there a chance that some part of your code may mutate the objects between rendering of the first and second chart?

---

<div class="post-metadata">

**Author:** ![badpackage](https://avatars.discourse-cdn.com/v4/letter/b/278dde/32.png) [@badpackage](https://talk.observablehq.com/u/badpackage)\
**Post date:** [March 18, 2024, 7:56pm UTC](https://talk.observablehq.com/t/plot-date-tooltip-without-daylights-savings-time/8930/6 "2024-03-18T19:56:34Z")

</div>

I’m only loading the data with FileAttachment before plotting it, so no mutating is happening on the Observable side.

```auto
const ncnrs_material_cost = FileAttachment("./data/.monthly-reports/.march-2024/Running NCNRs Costs by Topic.csv").csv({typed: true});

```

I am producing the data in R before plotting them in Observable, though, so that might have something to do with it. Checking the structure on both dataframes before saving to CSV gives the same exact `Date` type for both, though, and datatypes shouldn’t be preserved when saving to CSV. I’ll have to take a closer look and ensure the dataframes are being built the same exact way, not just the datatypes.