Two Plot.RuleX marks from one Plot.pointerX transform?

Community Help
1

Basically, I am trying to modify this example, but such that, in addition to the red line indicating the actual pointer position, I want another vertical line, a month after the red line.

Using a custom date adder,

function dateAdder(date, days) {
  let d = new Date(d3.timeFormat("%Y-%m-%d")(date));
  d.setDate(d.getDate() + days);
  return d;
}

and adding the line

Plot.ruleX(aapl, Plot.pointerX({x: d => dateAdder(d.Date, 30), py: "Close", stroke: "blue"})),

to the marks argument doesn’t work. Any tips or ideas?

2

You can specify px to be the reference position of the pointer, when it is not equal to x the position of the mark:

Plot.ruleX(aapl, Plot.pointerX({px: "Date", x: d => dateAdder(d.Date, 30), py: "Close", stroke: "blue"})),
3 Likes
3

Ah this works! Thanks…! I guess I didn’t fully understand the difference between x and px…

In any case, I redesigned the dashboard to use a date slider with a restricted time window to both scroll the plot and to specify the reference position of the pointer, the latter which I used to generate a ruleX and two other marks.