Unexplainable tooltip offset in XY-Chart when orientation of YAxis is set to left.

[jhofstede]

It might be a bug, but I've been wrapping my head around this for a couple of hours now. Once I put the Y-Axis on the left side, the tooltip is no longer in sync with the position of the mouse.

It seems to be caused by the orientation-prop of the YAxis.

    <YAxis label="GPTW RPM" orientation='left' numTicks={8}/>

Full

  <XYChart
      margin= {{top: 10, left: 60, right: 10, bottom: 40 }}
      width={props.parentWidth}
      height={props.height}
      showYGrid
      showXGrid
      xScale={{ type: 'time' }}
      yScale={{ type: 'linear' }}
      renderTooltip={({ event, datum, data, color }) => {
       const monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
       ];
       const month = monthNames[datum.x.getMonth()];
       return (
         <div>
           <strong style={{ color }}>{datum.label}</strong>
           <div><strong>Month: </strong>{month} {datum.x.getYear() + 1900}</div>
         </div>
       );
      }}
      snapTooltipToDataX
    >
    <HorizontalReferenceLine
      reference={1}
      stroke='#000000'
      strokeWidth={1}
      strokeDasharray='3 3'
      dashType='dotted'
      strokeLinecap='butt'
      label="House average"
      labelProps={{ width: 100, verticalAnchor: 'middle', dx: 5, dy: -10}}
    />

    <XAxis label="Time" />
    <YAxis label="GPTW RPM" orientation='left' numTicks={8}/>
     <CrossHair showHorizontalLine={false} fullHeight stroke="pink" />
  </XYChart>

Any help is appreciated!

[williaster]

hey @jhofstede thanks for checking out @data-ui. We recently discovered this bug as well when orientation="left". It should be a pretty straightforward fix, I think the computation just doesn't take into account the left margin properly.

I'll try to get to it in the next day or so 👍

[jhofstede]

@williaster many thanks for your work on @data-ui and your quick reply!