Chart.js
参考：
Chart.js – Open source HTML5 Charts for your website [Official]
chartjs/Chart.js: Simple HTML5 Charts using the <canvas> tag – GitHub
ドキュメント
参考：
Chart.js documentation [Official]
Chart.js API | Chart.js documentation [Official]
Chart.js 日本語ドキュメント (misc.0o0o.org)
Chart.js/docs at master · chartjs/Chart.js – GitHub
使い方
参考：
Chart.js で作成する折れ線グラフの実例 | Kapibara Tech Blog
How to use Chart.js | JavaScript in Plain English
An Introduction to Chart.js 2.0 Six Simple Examples | SitePoint
導入
参考：
ちゃーっとチャートが描ける、Chart.js の使い方 | ジーニアスブログ
Chart.js でグラフ描画にトライした話 | TechRacho
概要
参考：
グラフ作成にオススメ！「Chart.js」がかんたんに使えてイイ感じ | vdeep
棒グラフ
棒グラフを描く。
const barChart = new Chart('canvas', {
type: 'bar',
data, options
})
横向きの棒グラフを描く。
const barChart = new Chart('canvas', {
type: 'horizontalBar',
data, options
})
グラフ棒の幅を変えには barPercentage に棒の幅が占める割合を指定する。
xAxes: [{
barPercentage: 0.85
}]
棒グラフのカテゴリーを表す軸ではデフォルトで offsetGridLines: true となり、グラフ棒に重ならないようにグリッドがずれて描画される。
参考：
Bar | Chart.js documentation [Official]
Horizontal Bar Chart | Chart.js documentation [Official]
Scale Configuration | Chart.js documentation [Official]
offsetGridLines | Chart.js documentation [Official]
getPixelForGridLine – Chart.js/core.scale.js at v2.8.0 · chartjs/Chart.js – GitHub
積み上げ棒グラフ
X 軸、Y 軸に stacked: true を設定する。
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
参考：
chart.js で積み上げ横棒グラフを描く – Qiita
入館者数の統計等に使える Chart.js の積み上げ棒グラフ | やわらか図書館学
Stacked Bar Chart | Chart.js documentation [Official]
複合グラフ
参考：
chart.js で複数軸の複合グラフを描く – Qiita
グリッド／目盛りの設定
参考：
Grid Line Configuration | Chart.js documentation [Official]
Tick Configuration | Chart.js documentation [Official]
凡例
凡例を非表示にする。
options: {
legend: { display: false }
}
参考：
Legend | Chart.js documentation [Official]
ツールチップ
参考：
Tooltip | Chart.js documentation [Official]
Chart.js/core.tooltip.js at v2.8.0 · chartjs/Chart.js – GitHub
描画サイズをレスポンシブにする
canvas を含むコンテナ要素に position: relative を設定して相対配置にする。
<div style="position: relative;"> <canvas id="chart"></canvas> </div>
オプションで responsive: true を設定する。(デフォルト)
縦方向にもレスポンシブにするには maintainAspectRatio: false を設定する。
options: {
responsive: true,
maintainAspectRatio: false
}
参考：
Responsive | Chart.js documentation [Official]
フォントサイズを変更する
参考：
How to change ChartJS font size with javascript? – Stack Overflow
サンプル
参考：
Bar Chart with Custom onClick | CodePen
プラグイン
参考：
chartjs/awesome: A curated list of awesome Chart.js resources and libraries – GitHub
Vue で使う (vue-chartjs)
参考：
apertureless/vue-chartjs: Vue.js wrapper for Chart.js – GitHub
Ruby on Rails で使う (chartjs-ror)
参考：
airblade/chartjs-ror: Simplifies using Chart.js in Rails – GitHub
Documentation for chartjs-ror | RubyDoc.info
chartjs-ror/chart_helpers.rb at v3.6.4 · airblade/chartjs-ror – GitHub