Reactで、ライブラリを使わずにSVGで棒グラフを描く方法

// 0 から max までを、1・2・5 × 10 のべき乗の間隔で区切った目盛りの値を返す
export function niceTicks(max: number, count = 5): number[] {
  if (!(max > 0)) return [0, 1];
  const rough = max / count; // この間隔で count 本に分けると、ちょうど max に届く
  const pow = 10 ** Math.floor(Math.log10(rough));
  const step = [1, 2, 5, 10].map((m) => m * pow).find((s) => s >= rough)!;
  const n = Math.ceil(max / step);
  // 0.1 × 3 が 0.30000000000000004 にならないよう、桁を丸める
  return Array.from({ length: n + 1 }, (_, i) => Number((i * step).toPrecision(12)));
}

import { useId } from 'react';
import { niceTicks } from './niceTicks';

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

type Props = {
  data: Datum[];
  title: string; // 読み上げ用の名前（<title> に入る）
  width?: number; // viewBox の幅と高さ（座標の単位）
  height?: number;
};

// 目盛りの文字や項目名を置くための余白
const margin = { top: 24, right: 16, bottom: 32, left: 48 };

export function BarChart({ data, title, width = 480, height = 280 }: Props) {
  const titleId = useId();
  const descId = useId();
  const innerW = width - margin.left - margin.right;
  const innerH = height - margin.top - margin.bottom;

  const ticks = niceTicks(Math.max(...data.map((d) => d.value)));
  const yMax = ticks[ticks.length - 1];
  // 値を、描く範囲の上端からの位置に変える（SVG の y は下向きに増える）
  const y = (v: number) => innerH - (v / yMax) * innerH;

  const band = innerW / data.length; // 1本あたりの幅
  const barW = band * 0.6; // 棒の幅（残りはすき間）

  return (
    <svg
      viewBox={`0 0 ${width} ${height}`}
      role="img"
      aria-labelledby={titleId}
      aria-describedby={descId}
      style={{ display: 'block', width: '100%', height: 'auto' }}
    >
      <title id={titleId}>{title}</title>
      {/* 読み上げ用に、すべての値を文章にしておく */}
      <desc id={descId}>{data.map((d) => `${d.label} ${d.value.toLocaleString()}`).join('、')}</desc>
      <g transform={`translate(${margin.left},${margin.top})`}>
        {ticks.map((t) => (
          <g key={t} className="tick" transform={`translate(0,${y(t)})`}>
            <line x2={innerW} stroke="#e3e8ea" />
            <text x={-8} dy="0.32em" textAnchor="end" fontSize={12} fill="#5b6870">
              {t.toLocaleString()}
            </text>
          </g>
        ))}
        {data.map((d, i) => {
          const x = i * band + (band - barW) / 2;
          return (
            <g key={d.label}>
              <rect
                className="bar"
                x={x}
                width={barW}
                y={y(d.value)}
                height={innerH - y(d.value)}
                fill="#00c8e8"
              />
              <text
                className="value"
                x={x + barW / 2}
                textAnchor="middle"
                fontSize={12}
                fill="#1f2a30"
                // text の y は CSS で動かせないので、transform で位置を決める（CSS の transition が効く）
                style={{ transform: `translateY(${y(d.value) - 6}px)` }}
              >
                {d.value.toLocaleString()}
              </text>
              <text x={x + barW / 2} y={innerH + 20} textAnchor="middle" fontSize={12} fill="#1f2a30">
                {d.label}
              </text>
            </g>
          );
        })}
        <line y1={innerH} x2={innerW} y2={innerH} stroke="#5b6870" />
      </g>
    </svg>
  );
}

import { useLayoutEffect, useRef, useState, type ComponentProps } from 'react';
import { BarChart } from './BarChart';

// 置き場所の幅を測り、その幅を viewBox の幅にする（拡大・縮小されないので文字の大きさが変わらない）
export function ResponsiveBarChart(props: Omit<ComponentProps<typeof BarChart>, 'width'>) {
  const ref = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const el = ref.current!;
    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return <div ref={ref}>{width > 0 && <BarChart {...props} width={width} />}</div>;
}

import { useState } from 'react';
import type { Datum } from './BarChart';
import { ResponsiveBarChart } from './ResponsiveBarChart';

// 例のデータ（架空の数字）
const datasets: Record<string, Datum[]> = {
  '2025年': [
    { label: '1月', value: 120 },
    { label: '2月', value: 95 },
    { label: '3月', value: 180 },
    { label: '4月', value: 140 },
    { label: '5月', value: 210 },
    { label: '6月', value: 160 },
  ],
  '2026年': [
    { label: '1月', value: 150 },
    { label: '2月', value: 130 },
    { label: '3月', value: 260 },
    { label: '4月', value: 190 },
    { label: '5月', value: 240 },
    { label: '6月', value: 310 },
  ],
};

export function App() {
  const [year, setYear] = useState('2025年');
  return (
    <section>
      <div role="group" aria-label="表示する年">
        {Object.keys(datasets).map((y) => (
          <button key={y} type="button" aria-pressed={y === year} onClick={() => setYear(y)}>
            {y}
          </button>
        ))}
      </div>
      <ResponsiveBarChart data={datasets[year]} title={`${year}の月ごとの件数`} />
    </section>
  );
}

.bar { transition: y 0.4s ease, height 0.4s ease; }
.value { transition: transform 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .bar, .value { transition: none; } }