Wider tooltip areas for Observable Plot#

In this Observable notebook I’m plotting a line on a chart, but I want to provide tooltips showing the exact value at any point on the line.

Observable Plot (on desktop at least) can do that using the title mark property. But… if a line is only 1 pixel wide actually triggering a tooltip requires pin-point accuracy.

I figured out a workaround: render the same line twice - once with a tooltip and a very wide line length set to a low opacity, and then again as a solid thin black line.

Here’s what that looks like in JavaScript code for a cell:

1
Plot.plot({
2
  marks: [
3
    // This mark exists just for the tooltip - hence why it is wider and almost invisible
4
    Plot.line(points, {
5
      x: "date",
6
      y: "users",
7
      // Function to generate the text shown on the tooltip:
8
      title: (d) => d.date.toLocaleString() + " - " + d.users.toLocaleString(),
9
      strokeWidth: 12,
10
      opacity: 0.01
11
    }),
12
    // This mark displays with the default stroke of a single pixel wide black line
13
    Plot.line(points, {
14
      x: "date",
15
      y: "users"
16
    })
17
  ],
18
})

The final effect looks like this:

1
    Plot.tickX(points, {
2
      x: "date",
3
      title: (d) => d.date.toLocaleString() + " - " + d.users.toLocaleString(),
4
      strokeWidth: 12,
5
      stroke: "white",
6
      opacity: 0.01
7
    })