チャートとデータ可視化
ルール
- ReactプロジェクトではRechartsを使用 — コンポーザブルでレスポンシブ、型安全
- チャートは
<ResponsiveContainer width="100%" height={300}>でラップ — 固定ピクセル幅は避ける - アクセシブルな色を使用：色覚障害に対応したパレット（赤/緑の区別に依存しない）
- 軸ラベル：両方の軸に常にラベルを付け、読みやすい数値書式を使用（1200ではなく1.2K）
- ツールチップ：ホバー時に正確な値を表示 — 単位とロケール対応の数値でフォーマット
- ローディング状態：データ読み込み中はスケルトンチャート形状を表示
- データの種類に応じてチャートタイプを選択：折れ線（経時トレンド）、棒（比較）、面（ボリューム）、円（全体に対する割合 — 最大5スライス）
- 動的データには
keyプロパティ — データ変更時にRechartsが正しく再レンダリング
避けるべきこと
- 3Dチャート — 知覚を歪めるため、常にフラット/2Dを使用
- 5〜6スライス以上の円グラフ — 代わりに水平棒グラフを使用
- 軸ラベルや凡例のないチャート — 常にコンテキストを提供
- チャートコンポーネント内でのデータ取得 — 親コンポーネントで取得し、propsとして渡す