javascript chart.jsで1ページの中に複数の棒グラフを設置したい

Question

chart.jsを使ったグラフを1ページの中に複数表示したいのですが1つしか表示されません。
過去の質問も読んでみたのですが、色々試してもできませんでした。
記述方法などご指摘いただけると幸いです。

よろしくお願いします。

 <canvas id="chart1" height="80"></canvas>
    　<script>
        let lineCtx = document.getElementById("chart1");
        // 線グラフの設定
        let lineConfig = {
          type: 'bar',
          data: {
            // ※labelとデータの関係は得にありません
            labels: ['2013/3', '2014/3', '2015/3', '2016/3', '2018/3', '2019/3', '2020/3', '2021/3', '2022/3', '2023/3'],
            datasets: [{
              label: 'A',
              data: [100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000, 1000000],
              backgroundColor: '#004098',
            }, {
              label: 'B',
              data: [50000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000],
              backgroundColor: '#236AB1',
            }, {
              label: 'C',
              data: [25000, 50000, 75000, 100000, 125000, 150000, 175000, 200000, 225000, 250000],
              backgroundColor: '#72AAE2',
            }],
          },
          options: {
            scales: {
              // Y軸の最大値・最小値、目盛りの範囲などを設定する
              y: {
                suggestedMin: 0,
                suggestedMax: 1000000,
                ticks: {
                  stepSize: 250000,
                }
              }
            },
          },
        };
        let lineChart = new Chart(lineCtx, lineConfig);
    　</script>
<canvas id="chart2" height="80"></canvas>
    　<script>
        let lineCtx = document.getElementById("chart2");
        // 線グラフの設定
        let lineConfig = {
          type: 'bar',
          data: {
            // ※labelとデータの関係は得にありません
            labels: ['2013/3', '2014/3', '2015/3', '2016/3', '2018/3', '2019/3', '2020/3', '2021/3', '2022/3', '2023/3'],
            datasets: [{
              label: 'A',
              data: [100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000, 1000000],
              backgroundColor: '#004098',
            }, {
              label: 'B',
              data: [50000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 450000, 500000],
              backgroundColor: '#236AB1',
            }, {
              label: 'C',
              data: [25000, 50000, 75000, 100000, 125000, 150000, 175000, 200000, 225000, 250000],
              backgroundColor: '#72AAE2',
            }],
          },
          options: {
            scales: {
              // Y軸の最大値・最小値、目盛りの範囲などを設定する
              y: {
                suggestedMin: 0,
                suggestedMax: 1000000,
                ticks: {
                  stepSize: 250000,
                }
              }
            },
          },
        };
        let lineChart = new Chart(lineCtx, lineConfig);
    　</script>

Comments

[reimei]

前提の確認ですが、
1ページに<canvas>の高さ分(合計160）ありますか？
CSSでcanvas 要素のheight 指定を行っていたりはないですか？

[tottoki]

CSSでcanvas 要素のheight 指定は行っていません。

Answer 1

https://noauto-nolife.com/post/chartjs-responsive-chart/

こちらはためしてみましたか？
(全く関係ありませんがtype: 'bar' は棒グラフだったはず)

Comments

[tottoki]

試していませんが、高さの指定は問題なくできました。
ですが、グラフを複数設置すると片方が消えてしまって表示できません。

[reimei]

かさなっているか消えているか、現状では判断できないので確認としてできることはこちらでしょうか。

- 以下の部分にて受ける変数名を別のものにする

```js
let lineCtx = document.getElementById("chart1");
let lineChart = new Chart(lineCtx, lineConfig);

let lineCtx = document.getElementById("chart2");
let lineChart = new Chart(lineCtx, lineConfig);
```

の部分を

```js
let lineCtx1 = document.getElementById("chart1");
let lineChart1 = new Chart(lineCtx1, lineConfig);

let lineCtx2 = document.getElementById("chart2");
let lineChart2 = new Chart(lineCtx2, lineConfig);
```
に変更