今回はchart.jsで高さを固定する方法をご紹介

■ Chart.jsとは

JavaScriptのフレームワークです。

HTMLのcanvas上に、JavaScriptを用いて

折れ線グラフや円グラフ等を簡単に記述するものです。

基本的に横幅でheightのサイズが決まるので、

CSSから高さの指定が出来ない仕様となっています。(多分)

今回はその高さをJavaScript側から設定してしまう方法です

※今回はちょっとややこしい&ニッチな内容なので、

コードだけ置いておきます。

コメントで色々と解説しているので、

解読出来るかと思います👾

■ HTML

<!DOCTYPE html>

<head>

<style>

/* 外枠 */

.container {

border: solid;

height: 600px;

width: 600px;

}

/* canvasの親要素 */

.chart-container {

border: solid pink;

height: 500px;

width: 500px;

}

</style>

</head>

<body>

<canvas id="my-chart"> Canvas not Supported/.... </canvas>

</div>

</div>

(function () {

"use strict";

/* グラフの設定 */

var type = "line"; // 折れ線グラフ

var data = {

labels: [0, 1, 2, 3], // 横軸の値

datasets: [

// 赤色の折れ線

{

label: "AAAA", // ラベル名

data: [100, 200, 600, 350], // 実際のデータ

borderColor: "red", // 折れ線の色

lineTension: 0, // 折れ線のテンション

},

　// 青色の折れ線

　{

　 label: "BBBB", // ラベル名

　data: [-10, 500, 245, 360], // 実際のデータ

　 borderColor: "blue", // 折れ線の色

　lineTension: 0, // 折れ線のテンション

　},

　],

};

const option = {

　　// 以下の2つはレスポンシブにグラフを描画するために必要(らしい)

　　responsive: true,

　　maintainAspectRatio: false,

};

// HTMLのcanvas要素とリンクさせる。"2d"は二次元の意。

const ctx = document.getElementById("my-chart").getContext("2d");

/* 今回のポイント */

// canvasの高さを親要素の100%に設定する

// CSSでなく、ここで設定しなければ反映されない

ctx.canvas.height = "100%";

/* グラフの描画 */

const myChart = new Chart(ctx, {

　　type: type,

　　data: data,

　　option: option,

});

})();

</script>

</body>

</html>

このよう親要素であるピンクの枠線ぴったりに

高さが設定されました。

Chart.jsって情報が若干少ないので参考になると思います。

現場からは以上です！

【chart.js】グラフの高さを固定する