Rendering the tooltip in a portal

[ilyabo]

We have to render potentially large tooltips in a small chart displayed within a container which needs to use overflow: auto to be scrollable. That leads to the tooltip being cut:

One common approach to prevent this is to use a portal. Unfortunately, Nivo doesn't provide portal support (unlike some other charting libraries). It would be really useful if it did so!

But here's my workaround for the Line chart with the slice mode enabled:

Posting it here so maybe somebody finds it useful too.

const MARGIN = {top: 40, right: 20, bottom: 30, left: 50};
const width = 400;
const height = 200;
const chartWidth = width - MARGIN.left - MARGIN.right;
const containerRef = useRef<HTMLDivElement>(null);
return (
  <div ref={containerRef}>
    <Line
      width={width}
      height={height}
      data={data}
      margin={MARGIN}
      …
      enableCrosshair={true}
      enableSlices="x"
      animate={false}
      isInteractive={true}
      useMesh={true}
      sliceTooltip={({slice}) => {
        const containerBounds = containerRef.current?.getBoundingClientRect();
        if (!containerBounds) return null;
        return createPortal(
          <div
            style={{
              position: 'absolute',
              left: containerBounds.left + slice.x + MARGIN.left,
              top: containerBounds.top + slice.y + MARGIN.top,
              pointerEvents: 'none',
            }}
          >
            <div
              style={{
                display: 'inline-block',
                marginLeft: slice.x > chartWidth / 2 ? '-100%' : '0',
              }}>
              <div style={{
                fontSize: 10,
                background: '#262D40',
                padding: '9px 12px',
                borderRadius: 10,
                margin: 10
              }}>
                {slice.points.map(point => (
                  <div
                    key={point.id}
                    style={{
                      color: point.serieColor,
                      padding: '3px 0',
                    }}
                  >
                    <strong>{point.serieId}</strong> [{point.data.yFormatted}]
                  </div>
                ))}
              </div>
            </div>
          </div>,
          document.body
        );
      }}
    />
  </div>
);