We have to render potentially large tooltips in a small chart displayed within a container which needs to useoverflow: 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 someother charting libraries). It would be really useful if it did so! But here's my workaround for theLine 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>);
|
