特徴
学習に最適化されたサンプル集
単一ファイル完結
HTML、CSS、JavaScriptがすべて1つのファイルに。ダウンロードしてすぐ使えます。
段階的な学習
初心者から上級者まで、レベルに応じたサンプルで効率的に学習できます。
実践的なデザイン
実務で使えるデザインパターン。ダッシュボードやレポートに活用できます。
レスポンシブ対応
スマートフォンからデスクトップまで、あらゆるデバイスに対応。
対応チャートタイプ
Chart.jsの主要なチャートタイプを網羅
Line（折れ線）
Bar（棒グラフ）
Pie（円グラフ）
Doughnut（ドーナツ）
Radar（レーダー）
Polar Area（極座標）
Scatter（散布図）
Bubble（バブル）
Mixed（複合）
基本のチャート（1-10）
Chart.jsの基本的な使い方を学びます
SAMPLE 01
基本的な折れ線グラフ
Chart.jsの基本構造、type: 'line'の使い方
SAMPLE 02
基本的な棒グラフ
type: 'bar'、各バーの色設定
SAMPLE 03
横棒グラフ
indexAxis: 'y'で横向き表示
SAMPLE 04
基本的な円グラフ
type: 'pie'、割合の自動計算
SAMPLE 05
ドーナツチャート
type: 'doughnut'、cutout設定
SAMPLE 06
レーダーチャート
type: 'radar'、複数指標の比較
SAMPLE 07
複数折れ線グラフ
複数のdatasets、凡例の使い方
SAMPLE 08
グループ棒グラフ
複数データセットの棒グラフ
SAMPLE 09
積み重ね棒グラフ
stacked: trueで積み上げ表示
SAMPLE 10
エリアチャート
fill: trueで塗りつぶし
カスタマイズ（11-20）
様々なチャートタイプとカスタマイズ方法を学びます
SAMPLE 11
散布図
type: 'scatter'、{x, y}形式のデータ
SAMPLE 12
バブルチャート
type: 'bubble'、3次元データの表現
SAMPLE 13
極座標エリアチャート
type: 'polarArea'の使い方
SAMPLE 14
複合チャート
棒グラフと折れ線の組み合わせ
SAMPLE 15
ステップ線グラフ
stepped: 'before'/'after'/'middle'
SAMPLE 16
グラデーション背景
Canvas APIでグラデーション作成
SAMPLE 17
ツールチップカスタマイズ
tooltip.callbacksの活用
SAMPLE 18
凡例カスタマイズ
カスタムHTML凡例の作成
SAMPLE 19
軸カスタマイズ
ticks.callback、グリッド設定
SAMPLE 20
データラベル表示
chartjs-plugin-datalabelsの使用
高度な機能（21-30）
インタラクティブな実装と高度なカスタマイズ
SAMPLE 21
リアルタイム更新
data.push()、chart.update()
SAMPLE 22
ドリルダウン機能
クリックで詳細データを表示
SAMPLE 23
カスタムプラグイン
beforeDraw/afterDrawフック
SAMPLE 24
アニメーションカスタマイズ
easing、duration、delay設定
SAMPLE 25
複数Y軸
複数のscales、yAxisID
SAMPLE 26
HTMLカスタムツールチップ
tooltip.externalの活用
SAMPLE 27
クリックイベント処理
onClick、要素の特定
SAMPLE 28
画像エクスポート
canvas.toDataURL()の活用
SAMPLE 29
レスポンシブデザイン
responsive、maintainAspectRatio
SAMPLE 30
ダッシュボード
複数チャートの統合、ダークテーマ