Single tooltip for combined line + stack plot

[dispatchrabbi]

Hello! I have been hacking at this for a while and can't quite see how to put the legos together in the right configuration. Hopefully y'all can help me out.

I have a plot that combines a line and a stacked area. The use case is that the graph shows multiple peoples' combined progress (the stack) versus a par/goal line (the line). I'd like a single tooltip that, when near the stack, shows the individual (not combined) progress, and when near the par line, shows the par value.

The data that makes up the stacked area graph has shape { series: string; date: string; value: number; }. (The date field is guaranteed to be YYYY-MM-DD, so it easily converts to a date.) The data that makes up the par line has shape { series: 'Par'; date: string; value: number }.

My current setup looks like this:

const parMark = Plot.lineY(par, {
  x: 'date',
  y: 'value',
  stroke: 'series',
  strokeDasharray: 8,
});

const areaMark = Plot.areaY(data, Plot.stackY({
  x: 'date',
  y: 'value',
  z: 'series',
  order: 'series',
  sort: 'date',
  fill: 'series',
}));

const dataAndPar = data.concat(par ?? []);
const tipMark = Plot.tip(dataAndPar, Plot.pointer({
  x: { label: 'Date', value: 'date' },
  y: { label: 'Value', value: 'value' },
  channels: {
    series: { label: 'Series', value: 'series' },
  },
  format: {
    series: true,
    x: true,
    y: true,
  },
  fill: colorScheme.value.background,
}));

const chart = Plot.plot({
  /* lots of plot config omitted */
  marks: [ parMark, areaMark, tipMark ],
});

// then render the chart

But as-is, this puts tooltips for the stacked data where it would be if it weren't stacked. I have also tried doing Plot.tip(dataAndPar, Plot.pointer(Plot.stackY({ ... }))) for tipMark, but that incorporates the par line into the stacking calculations.

I can't have two different tooltips for the data and the par line because when the values are close (which they almost always will be at the beginning of the chart), they will overlap.

I feel like the right way is to somehow combine the stackY transform into a custom transform that switches out the value based on whether series is "Par" or not... but I can't figure out how to do that and I feel like I'm fighting the library. I also have searched quite a lot and haven't found anything that helps, though perhaps I'm just missing something.

Any ideas? Thank you!

[Fil]

Stacks are based on series that share the same x — exactly. So if you move the “par” series by a tiny amount to the right, (say 1 millisecond by adding +1 to the date), it will not be stacked with other data from the same day. Let me know if this works.

[dispatchrabbi]

Hi there! I wish I had been able to implement this suggestion sooner, but I wasn't able to get back to this aspect of my project until today. This did the trick! Thank you for your quick response and for being such an active maintainer. It's very much appreciated.