Reactで、折れ線グラフに乗せると値が出るツールチップを作る方法

export type Point = { label: string; value: number };

// グラフの大きさ（viewBox の単位）と、軸の文字のための余白
export const W = 640;
export const H = 300;
export const PAD = { top: 16, right: 16, bottom: 32, left: 48 };
export const PLOT_W = W - PAD.left - PAD.right;
export const PLOT_H = H - PAD.top - PAD.bottom;

// i 番目の点の x と、値 v の y（どちらも viewBox の単位）
export const xAt = (i: number, n: number) => PAD.left + (n > 1 ? (PLOT_W * i) / (n - 1) : PLOT_W / 2);
export const yAt = (v: number, max: number) => PAD.top + PLOT_H * (1 - v / max);

// 画面上のポインターの位置（clientX, clientY）を、viewBox の座標に直す
export function toSvgPoint(svg: SVGSVGElement, clientX: number, clientY: number): DOMPoint | null {
  const m = svg.getScreenCTM();
  if (!m) return null;
  return new DOMPoint(clientX, clientY).matrixTransform(m.inverse());
}

// viewBox の x に、いちばん近い点の番号（点は等間隔に並んでいる）
export function nearestIndex(x: number, n: number): number {
  if (n <= 1) return 0;
  const i = Math.round(((x - PAD.left) / PLOT_W) * (n - 1));
  return Math.min(n - 1, Math.max(0, i));
}

import { useState, type KeyboardEvent, type PointerEvent } from 'react';
import { H, PAD, PLOT_H, W, nearestIndex, toSvgPoint, xAt, yAt, type Point } from './chart';

type Props = {
  data: Point[];
  title: string;
  max: number; // 縦軸のいちばん上の値
  unit?: string;
};

export function LineChart({ data, title, max, unit = '' }: Props) {
  const [active, setActive] = useState<number | null>(null);
  const n = data.length;
  const points = data.map((d, i) => `${xAt(i, n)},${yAt(d.value, max)}`).join(' ');

  const pick = (e: PointerEvent<SVGSVGElement>) => {
    const p = toSvgPoint(e.currentTarget, e.clientX, e.clientY);
    if (p) setActive(nearestIndex(p.x, n));
  };
  // 指を離したときにも pointerleave が来るので、マウスのときだけ消す
  const leave = (e: PointerEvent<SVGSVGElement>) => {
    if (e.pointerType === 'mouse') setActive(null);
  };
  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    const next: Record<string, number> = {
      ArrowRight: active === null ? 0 : Math.min(n - 1, active + 1),
      ArrowLeft: active === null ? n - 1 : Math.max(0, active - 1),
      Home: 0,
      End: n - 1,
    };
    if (e.key in next) {
      e.preventDefault();
      setActive(next[e.key]);
    } else if (e.key === 'Escape') {
      setActive(null);
    }
  };

  const sel = active === null ? null : data[active];
  const selX = active === null ? 0 : xAt(active, n);
  const text = sel ? `${sel.label} ${sel.value}${unit}` : '';

  return (
    <div
      className="line-chart"
      tabIndex={0}
      role="group"
      aria-label={`${title}（左右の矢印キーで値を読む）`}
      onKeyDown={onKeyDown}
      onBlur={() => setActive(null)}
    >
      <svg
        viewBox={`0 0 ${W} ${H}`}
        aria-hidden="true"
        onPointerMove={pick}
        onPointerDown={pick}
        onPointerLeave={leave}
      >
        {[0, 0.5, 1].map((t) => (
          <g key={t}>
            <line x1={PAD.left} x2={W - PAD.right} y1={yAt(max * t, max)} y2={yAt(max * t, max)} stroke="#d5dde0" />
            <text x={PAD.left - 8} y={yAt(max * t, max) + 4} textAnchor="end" fontSize={12} fill="#5b6870">
              {max * t}
            </text>
          </g>
        ))}
        {data.map((d, i) => (
          <text key={d.label} x={xAt(i, n)} y={H - 10} textAnchor="middle" fontSize={12} fill="#5b6870">
            {d.label}
          </text>
        ))}
        <polyline points={points} fill="none" stroke="#00c8e8" strokeWidth={3} strokeLinejoin="round" />
        {sel && (
          <>
            <line className="guide" x1={selX} x2={selX} y1={PAD.top} y2={PAD.top + PLOT_H} stroke="#9aa5ab" strokeDasharray="4 4" />
            <circle className="dot" cx={selX} cy={yAt(sel.value, max)} r={6} fill="#fff" stroke="#067a98" strokeWidth={3} />
          </>
        )}
      </svg>
      {sel && (
        <div
          className="tip"
          aria-hidden="true"
          style={{
            left: `${(selX / W) * 100}%`,
            top: `${(PAD.top / H) * 100}%`,
            // 右半分の点では、線の左側に出す
            transform: active! > (n - 1) / 2 ? 'translateX(calc(-100% - 10px))' : 'translateX(10px)',
          }}
        >
          <span className="tip-label">{sel.label}</span>
          <strong>
            {sel.value}
            {unit}
          </strong>
        </div>
      )}
      <p className="visually-hidden" aria-live="polite">
        {text}
      </p>
    </div>
  );
}

import { LineChart } from './LineChart';
import type { Point } from './chart';

// 例のデータ（架空の数字）
const visitors: Point[] = [
  { label: '1月', value: 320 },
  { label: '2月', value: 280 },
  { label: '3月', value: 410 },
  { label: '4月', value: 460 },
  { label: '5月', value: 390 },
  { label: '6月', value: 350 },
  { label: '7月', value: 520 },
  { label: '8月', value: 580 },
  { label: '9月', value: 430 },
  { label: '10月', value: 470 },
  { label: '11月', value: 500 },
  { label: '12月', value: 610 },
];

export function App() {
  return <LineChart data={visitors} title="月ごとの来店数" max={800} unit="人" />;
}

.line-chart { position: relative; max-width: 640px; }
.line-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.line-chart:focus-visible { outline: 2px solid #067a98; outline-offset: 4px; }
.tip { position: absolute; pointer-events: none; white-space: nowrap; padding: 6px 10px; border-radius: 6px; background: #1f2a30; color: #fff; font-size: 14px; line-height: 1.4; }
.tip-label { display: block; font-size: 12px; color: #c9d3d8; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }