Tooltip Position Issue with X Scale Interval and Plot.tip

[dheerajy1]

Hello ObservableHq Plot community,

Good Day!

Question

Is this a known issue? Can x.interval and Plot.tip coexist with correct positioning, or am I misconfiguring something? Using, x.interval is a must requirement for my use case.

Problem

When using x.interval (e.g., "day") alongside Plot.tip with Plot.binX, the tooltip appears at an incorrect position, offset from the data point. Removing x.interval fixes the positioning.

Reproduction Code

• Problematic (with x.interval).

code

Plot.plot({
  width,
  height: 400,
  x: {
    domain: [startEndX[0], d3.utcDay.offset(startEndX[1], 1)],
    interval: inputInterval, // "Day" - causes tooltip offset
    label: "time"
  },
  y: {
    domain: startEndY,
    label: "total mails"
  },
  marks: [
    Plot.dot(
      dataAppliedMails,
      Plot.binX({ y: "count" }, { x: "date", interval: inputInterval })
    ),
    Plot.tip(
      dataAppliedMails,
      Plot.pointer(
        Plot.binX({ y: "count" }, { x: "date", interval: inputInterval })
      )
    )
  ]
})

image

• Observabe the tooltip position which is away from data point along x axis.

Working (without x.interval):

• with only Plot.tip().

code

Plot.plot({
  width,
  height: 400,
  x: {
    domain: [startEndX[0], d3.utcDay.offset(startEndX[1], 1)],
    label: "time"
  },
  y: {
    domain: startEndY,
    label: "total mails"
  },
  marks: [
    Plot.dot(
      dataAppliedMails,
      Plot.binX({ y: "count" }, { x: "date", interval: inputInterval })
    ),
    Plot.tip(
      dataAppliedMails,
      Plot.pointer(
        Plot.binX({ y: "count" }, { x: "date", interval: inputInterval })
      )
    )
  ]
})

image

• Here, the tooltip is correctly positioned.
• I also observed that its the axis that changed and positioned that data point, its like the tip from Plot.tip is at midway of 17 and 18 Sep.

Workaround

• Using tip: "xy" on Plot.binX works with x.interval, but loses the flexibility of separate Plot.tip:

code

Plot.plot({
  width,
  height: 400,
  x: {
    domain: [startEndX[0], d3.utcDay.offset(startEndX[1], 1)],
    interval: inputInterval, // "Day" - causes tooltip offset
    label: "time"
  },
  y: {
    domain: startEndY,
    label: "total mails"
  },
  marks: [
    Plot.dot(
      dataAppliedMails,
      Plot.binX(
        { y: "count" },
        { x: "date", interval: inputInterval, tip: "xy" }
      )
    )
  ]
})

image

• In the below image, the tool tip is positioned correctly.

Sample Data

dataAppliedMails = [
  // 15 Sep: 2 mails
  { date: new Date("2025-09-15"), id: 1 }, { date: new Date("2025-09-15"), id: 2 },
  // 16 Sep: 4 mails  
  { date: new Date("2025-09-16"), id: 3 }, { date: new Date("2025-09-16"), id: 4 },
  { date: new Date("2025-09-16"), id: 5 }, { date: new Date("2025-09-16"), id: 6 },
  // 17 Sep: 8 mails
  { date: new Date("2025-09-17"), id: 7 }, { date: new Date("2025-09-17"), id: 8 },
  { date: new Date("2025-09-17"), id: 9 }, { date: new Date("2025-09-17"), id: 10 },
  { date: new Date("2025-09-17"), id: 11 }, { date: new Date("2025-09-17"), id: 12 },
  { date: new Date("2025-09-17"), id: 13 }, { date: new Date("2025-09-17"), id: 14 }
]

startEndX = [new Date("2025-09-15"), new Date("2025-09-17")]
inputInterval = "Day"
startEndY = [0, 8]

Thanks in advance.

[mbostock]

The binX transform produces x1 and x2 representing the x-extent of the bin. A mark that only needs a single x-position typically uses the implicit x output of the bin transform, which is the middle of x1 and x2. But I think the tip mark might consume x1 and x2 itself, unlike the dot mark, hence the difference in behavior. I’d need to investigate further to say for sure but I suspect that is the reason.

[dheerajy1]

Thank you @mbostock for your initial analysis.

I am unable to fully wrap my head around this issue.

Reiterating the issue

With x.interval = "day" and Plot.tip, (Please Ref: First Image from my question):

Dot → shows exactly at 17 Sep (as expected).

Tip → shows at the midpoint between 17 Sep and 18 Sep (unexpected offset as per my expectation).

If this is the intended behavior under this condition, then I will stick with workaround solution, or should we consider this as a potential bug?

Also, I will wait for your investigation findings.