概要
Chart.jsでは普通にグラフを作ると画面の幅に合わせて１つのデータ当たりのサイズをレスポンシブに調整して表示してくれます．
とても便利ですが，データの量が多いとかなり見づらくなってしまいます．
そこでデータ１つ当たりの横幅を固定して画面に収まりきらない分は横スクロールで見えるようにしようと思いましたが，かなり苦労したのでメモを残します．参考になれば幸いです．
完成図
今回は棒グラフが必要だったので，棒グラフを作成しました．
他の種類のグラフは試していませんが，データ構造が同じようなグラフなら上手くいくと思います．
図の下にスクロールバーが描画され，スクロールバーを動かすとスクロールすることができます．
(右の方はラベルしか描画されていませんが，値を入れなかっただけなので気にしないでください．）
実行環境
ブラウザ: Google Chrome
Chart.js バージョン: 2.9.3
CDNを読み込んで使っています
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
HTML
まずhtmlがこちらです．
<div class="chartWrapper" style="position: relative; overflow-x: scroll;">
<div class="chartContainer" style="height:200px;"> //高さは好きに設定
<canvas id="chart" style="position: absolute; left: 0; top: 0;"></canvas>
</div>
</div>
canvasを２つのdivで囲っています．
Javascript
続いてJavasciptがこちらです．
var xAxisLabelMinWidth = 15; // データ当たりの幅を設定
var data = [12, 19, 3, 5, 2];
var width = data.length*xAxisLabelMinWidth; // グラフ全体の幅を計算
document.getElementById('chart').style.width = width+"px"; // グラフの幅を設定
document.getElementById('chart').style.height = "200px"; //htmlと同じ高さを設定
var myChart = new Chart(document.getElementById('chart').getContext('2d'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [{
label: 'sample data',
data: data,
}]
},
options: {
responsive: false, //trueにすると画面の幅に合わせて作図してしまう
}
});
データ当たりの幅をまず設定して，そこからグラフ全体の幅を計算しています．
これによりデータごとの描画サイズを固定することができます．
完成
以上のコードで横スクロール可能な図を作成できると思います．
参考
https://stackoverflow.com/questions/39473991/how-to-make-a-chart-js-bar-chart-scrollable
https://stackoverrun.com/ja/q/10874652
これらを参考にしましたが，自分の環境ではうまくいかなかったので修正しています．