家計簿アプリを作る #27：収支グラフの表示
家計簿アプリ作成シリーズの第27回です。Chart.js を使って月別の収支を棒グラフで可視化します。
ライブラリのインストール
npm install chart.js svelte-chartjs
chart.js がグラフ本体、svelte-chartjs が Svelte 用のラッパーコンポーネントです。
実装
インポートと登録
<script lang="ts">
import { Bar } from "svelte-chartjs";
import {
Chart,
BarElement,
CategoryScale,
LinearScale,
Tooltip,
Legend,
} from "chart.js";
Chart.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
</script>
Chart.js はデフォルトでは全機能を含まず、使う機能を Chart.register() で明示的に登録する必要があります。これによりバンドルサイズを小さく抑えられます。
| 登録するもの | 役割 |
|---|---|
BarElement |
棒グラフの棒を描画する |
CategoryScale |
X軸のカテゴリスケール（文字列ラベル） |
LinearScale |
Y軸の数値スケール |
Tooltip |
ホバー時のツールチップ |
Legend |
グラフの凡例 |
円グラフ（Pie）を使う場合は BarElement の代わりに ArcElement を登録します。CategoryScale と LinearScale は不要です。
chartData の構造
const chartData = $derived({
labels: ["収入", "支出"],
datasets: [
{
label: data.selectedMonth ?? "",
data: [data.totalIncome, data.totalExpense],
backgroundColor: ["rgba(34, 197, 94, 0.5)", "rgba(239, 68, 68, 0.5)"],
borderColor: ["rgb(34, 197, 94)", "rgb(239, 68, 68)"],
borderWidth: 1,
},
],
});
labels: X軸のラベル。datasets.dataと同じ順番で対応しますdatasets.label: 凡例に表示されるラベル。選択中の年月をセットしていますdatasets.data: 数値データ。labelsと対応する順番で指定しますbackgroundColor: 棒の塗りつぶし色。rgba()で透明度を指定できますborderColor: 棒の枠線の色borderWidth: 枠線の太さ
色は Tailwind の green-500（34, 197, 94）と red-500（239, 68, 68）を使っています。
$derived にすることで月を切り替えたときに自動的にグラフが更新されます。
テンプレート
<div>
<Bar data={chartData} />
</div>
まとめ
| ポイント | 内容 |
|---|---|
| ライブラリ | chart.js + svelte-chartjs |
| 機能登録 | Chart.register() で使う機能だけ登録してバンドルサイズを削減 |
| データ更新 | $derived で月切り替え時に自動更新 |
| 色指定 | rgba() で透明度付きの色を指定 |