Tip text in line chart refuses to be formatted.

Community Help
1

Given the code below,

<div class="card">${
    resize((width) => Plot.plot({
      title: "Population",
      subtitle: "From 1790 - 2020 Based on the US Census",
      width,
      x: {type: "time", label: "Year", tickFormat: "%Y", domain: [new Date("1790-01-01"), new Date("2020-12-31")]},
      y: { grid: true, label: "Population" },
      marks: [
        Plot.ruleY([0]),
        Plot.line(tbp.map(d => ({ Year: new Date(d.Year, 0), "Population Count": +d["Population Count"] })), { x: "Year", y: "Population Count", tip: (d) => d.Year.slice(0,4)})
      ],
    }))
  }</div>

I’ve tried more than 10 different ways to get the tip text to NOT display in utc format. I can’t believe that something so simple seems so complex to pull off. It took a while to get the tick format to recognize the data as years, but I finally did that. Can’t achieve the same for the tooltip text.

2

You can follow the pattern documented here Tip mark | Observable Plot (search for “formatting”).

1 Like
3

Thanks for the suggestion. I went to that page and tried to implement the logic there. However, the UTC code is quite persistent. I’ve tried to fix it perhaps 30 times. I will not give up, but I don’t know what to do next.

4

One way to solve this would be to say

tip: {format: {x: "%Y"}}

as shown in the documentation that Fil linked.

The other way to solve this problem would be to change the x scale to represent years instead of dates. But, then you’ll get the default number formatting which will use a comma to group thousands. You can fix that with the d format specifier.

Plot.plot({
  title: "Population",
  subtitle: "From 1790 - 2020 Based on the US Census",
  width,
  x: {label: "Year", tickFormat: "d", domain: [1790, 2020]},
  y: {grid: true, label: "Population"},
  marks: [
    Plot.ruleY([0]),
    Plot.line(tbp, {x: "Year", y: "Population Count", tip: {format: {x: "d"}}})
  ]
})

While you haven’t included all of your code, it looks like your data is also untyped, where the column values are represented as strings. If you’re using CSV data, we recommend say csv({typed: true}) to coerce strings to numbers (or dates or booleans) as appropriate, rather than doing that coercion within your Plot specification.

But, another way you can force Plot to interpret the data as quantitative is to set the scale type. For example:

Plot.plot({
  title: "Population",
  subtitle: "From 1790 - 2020 Based on the US Census",
  width,
  x: {type: "linear", label: "Year", tickFormat: "d", domain: [1790, 2020]},
  y: {type: "linear", grid: true, label: "Population"},
  marks: [
    Plot.ruleY([0]),
    Plot.line(tbp, {x: "Year", y: "Population Count", tip: {format: {x: "d"}}})
  ]
})
5

Hello Mike.
I am EXTREMELY grateful for your lengthy reply. I’m away from my computer at the moment, but cannot wait to try the approaches you’ve selected. I will humbly report back once I have tried them.
Best wishes!

6

OMG! The first solution worked! Thanks again Mike. I am henceforth fully committed to using this solution for the project I’m working on. Moreover, I will hold on the second solutions to learn from, in case I have a slightly different solution in the future.