概要

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

これらを参考にしましたが，自分の環境ではうまくいかなかったので修正しています．

Chart.jsで横スクロール可能なグラフを作る

概要

完成図

実行環境

HTML

Javascript

完成

参考