【Javascript】Chart.JSでプロットしたグラフの大きさを変更する

プログラミング

2023.04.13

この記事は約5分で読めます。

前回の記事

→ChartjsとColorschemesでオシャレなグラフをプロットする

Chartjsで作ったグラフの大きさを変更する

ChartJSで作成したグラフのサイズを変更したい場合はcanvasタグにcss設定を追記すればOKです。DIVタグで囲ったりJSで制御すればいいじゃんとか思ったもののうまく反映されませんでした。

<変更前>

<canvas id="sampleChart">

<変更後>

<canvas id="sampleChart"  style="display: block; width: 516px; height: 580px;">

一応サンプルコードも載せておきます。

<canvas id="spurChartjsBar" style="display: block; width: 516px; height: 580px;"></canvas>
<script>
var ctx = document.getElementById("spurChartjsBar").getContext('2d');
var myChart = new Chart(ctx, {
                              type: 'line',
                              data: { 
                                      labels: plot_index1,
                                      datasets: [{
                                                  label: 'Blue',
                                                  data: trade_data1,
                                                  backgroundColor: window.chartColors.primary,
                                                  borderColor: 'transparent'
                                                  },
                                                  ]},
                                                  options: {
                                                             legend: {
                                                                      display: false
                                                                      },
                                                             scales: {
                                                                      yAxes: [{
                                                                               ticks: {
                                                                                       beginAtZero: false
                                                                                       }
                                                                              }]
                                                                      }
                                                             }
                           });
</script>