Tooltip position not aligned with scaleBand X axis

[maximekl]

Problem :

When i want to align tooltips info with a Bar it's not consistent, it's depends of the number of bars rendered.
I'm not sure if its a bug or just an approx (because the div is outside the svg).

Video :

Clic to see full video :

Reproductible code :

import React from "react";
import { Group } from "@visx/group";
import { AxisBottom, AxisRight } from "@visx/axis";
import { scaleLinear, scaleOrdinal, scaleBand } from "@visx/scale";
import { BarStack, BarRounded } from "@visx/shape";
import { Tooltip, useTooltip, defaultStyles } from "@visx/tooltip";

let data = [];
for (let i = 0; i < 10; i++) {
  let year = 2020 + i;
  let amount = 5000 + 2500 * i;
  let added = 2500 + 1000 * i;
  data.push({
    year: year,
    deposit: amount,
    average: added,
    best: added + 250,
    bad: added - 250,
  });
}

const width = 600;
const height = 300;
const margin = {
  top: 40,
  left: 40,
  bottom: 40,
  right: 40,
};
const yMax = height - margin.top - margin.bottom;

// accessors
const year = (d) => Number(d.year);
const total = (d) => Number(d.deposit + d.best);
const formatter = Intl.NumberFormat("fr", { notation: "compact" });
let keys = ["deposit", "average"];

const yearScale = scaleBand({
  domain: data.map(year),
  round: true,
  padding: 0.2,
  range: [0, width - margin.right],
  nice: true,
});
const moneyScale = scaleLinear({
  domain: [0, Math.max(...data.map(total))],
  range: [yMax, 0],
});

const colorScale = scaleOrdinal({
  domain: keys,
  range: ["#5D66EB", "#C9B69F"],
});

let tooltipTimeout;
const tooltipStyles = {
  ...defaultStyles,
  width: 60,
  height: 32,
  backgroundColor: "#5D66EB",
  color: "white",
  display: "grid",
  placeItems: "center",
  borderRadius: 2,
  padding: 0,
};

export default function BarGraph() {
  const { tooltipOpen, tooltipLeft, tooltipData, hideTooltip, showTooltip } = useTooltip();
  return (
    <div style={{ margin: "20px" }}>
      <svg width={width} height={height}>
        <rect x={0} y={0} width={width} height={height} fill={"#f9f9fb"} rx={5} />

        <Group top={margin.top}>
          <AxisBottom
            hideAxisLine={false}
            hideTicks={false}
            top={yMax}
            scale={yearScale}
            numTicks={7}
            tickLabelProps={() => ({
              dx: "0.3em",
              dy: "0.3em",
              fontSize: 14,
              textAnchor: "middle",
              fill: "#717186",
            })}
          />
          <AxisRight
            hideAxisLine={true}
            hideTicks={true}
            scale={moneyScale}
            numTicks={7}
            left={width - margin.right}
            tickLabelProps={() => ({
              dx: "0.3em",
              dy: "0.3em",
              fontSize: 14,
              textAnchor: "middle",
              fill: "#717186",
            })}
            tickFormat={(money) => formatter.format(money)}
          />
        </Group>
        <Group top={margin.top}>
          <BarStack data={data} keys={keys} x={year} xScale={yearScale} yScale={moneyScale} color={colorScale}>
            {(barStacks) =>
              barStacks.map((barStack) =>
                barStack.bars.map((bar) => (
                  <BarRounded
                    key={`bar-stack-${barStack.index}-${bar.index}`}
                    id={`bar-stack-${barStack.index}-${bar.index}`}
                    x={bar.x}
                    y={bar.y}
                    height={bar.height}
                    width={bar.width}
                    fill={bar.color}
                    radius={5}
                    top={barStack.index}
                    bottom={!barStack.index}
                    onMouseLeave={() => {
                      tooltipTimeout = window.setTimeout(() => {
                        //hideTooltip();
                      }, 300);
                    }}
                    onMouseMove={() => {
                      if (tooltipTimeout) clearTimeout(tooltipTimeout);
                      const top = bar.y + margin.top;
                      const left = bar.x; // can be bar.x + bar.width / 2;
                      console.log(bar.x + bar.width / 2);
                      showTooltip({
                        tooltipData: bar,
                        tooltipTop: top,
                        tooltipLeft: left,
                      });
                    }}
                  />
                ))
              )
            }
          </BarStack>
        </Group>
      </svg>
      {tooltipOpen && tooltipData && (
        <Tooltip top={height - margin.bottom / 2} left={tooltipLeft} style={tooltipStyles} offsetLeft={0}>
          <strong>{year(tooltipData.bar.data)}</strong>
        </Tooltip>
      )}
    </div>
  );
}

[williaster]

Hi @maximekl 👋 thanks for checking out visx. I converted this from an issue to a discussion since it's a usage question not an issue with the library.

Here's a working sandbox for you. I just set the x position of the tooltip to bar.x + bar.width / 2, if you don't account for the bar width, the tooltip will be aligned to the start of the bar.

it's not consistent, it depends of the number of bars rendered

This seemed to work fine for any number of bars I tried

[maximekl]

Hello @williaster,

thanks for the fast reply, i just found the problem and its CSS, just change the css, add margin: 0; and you will have the same problem :

Here my css file :

html,
body,
#root {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 2em;
}

[williaster]

ah, okay. I updated the sandbox again and believe have it working (sorry should have forked it to preserve the different versions).

the styling of the root container really shouldn't affect tooltip positioning, I think the implementation was missing a key point from the tooltip docs that the container of the tooltip needs to have position: 'relative':

After I added that (+margin: 0 on the page root), the tooltip was positioned correctly except its left edge was aligned at the middle of the bar. I think that's expected, so to middle-align as you want I added a - tooltipStyles.width / 2.

[maximekl]

Hi,

thanks a lot, it's not straightforward but it's working now.

thanks for your time 🙏