display:gridの時にchart.jsのグラフをレスポンシブにするとサイズが大きくはなるが小さくならない

#前提・実現したいこと
現在HTMLのgridの中にChart.jsを使ってグラフを作っています。
それをスマホなど画面のサイズが変わっても見れるようレスポンシブにしたいと考えています。
もしgridの状態で改善できない場合は、gridの代わりに何を使えば同じようにデザインできるか、
またgridの中でもレスポンシブなグラフを作れるフリーのライブラリがあるか知りたいです。

#発生している問題・エラーメッセージ
親要素のdisplay要素がgridの時、Chart.jsのcanvasが入っているdiv要素のwidthが設定されていないか、100%に設定されていると
ブラウザの開発者モードでレスポンシブデザインモードで幅を変えるとグラフの大きさが大きくはなるのですが小さくなりません。
F5などで読み込み直せば読み込んだ時点の画面の幅に調節されるのですが、この小さくならないことでデザインが崩れないか心配です。

#該当のソースコード
問題が起きるよう書きました。
gridを外すかwidthを100%未満にすればレスポンシブになると思います。

<!doctype html>
<html>
<head>
    <title>Bar Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
</head>
<body style="display:grid">
    <div id='Graph' style="width:100%">
        <canvas id="Chart" width="400" height="200">
        </canvas>
    </div>
    <script type="text/javascript">
	    var ctx = document.getElementById("Chart");
	    Chart.plugins.register({
	        beforeDraw: function(ch){
		        var ctx = ch.chart.ctx;
			    ctx.fillStyle = 'rgba(255, 255, 255, 1)';
			    ctx.fillRect(0, 0, ch.chart.width, ch.chart.height);
            }
	    });
	    var test = ["1","2","3","4"];
        var chart = new Chart(ctx,{
            type: 'bar',
            data: {
                labels: ["赤", "青", "黄", "緑"],
                datasets: [{
                    label: '得票数',
                    data: [12, 19, 3, 5],
                    backgroundColor:'rgba(255,90,130,0.2)',
                    borderColor: 'rgba(255,90,130,1)',
                    borderWidth: 1
                },
                {
                    label:'item2',
                    data:[20,14,18,4],
                    backgroundColor:'rgba(55,160,200,0.2)',
                    borderColor:'rgba(55,160,200,1)',
                    borderWidth:0.5
                }]
            },
            options: {
                responsive: true,
                scales:{
                    yAxes: [{
                        autoSkip:true,
                            ticks: {
                                min:0
                            }
                    }]
                },
                title: {
                    display: true,
                    text: 'カスタムチャートタイトル'
                }
            }
        });
    </script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

jqueryですがいいですか？
下記を入れてみてください

html
1    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2    <script>
3    $(function() {
4      //windowがリサイズされたときの処理
5      $(window).resize(function() {
6        var width = $(this).outerWidth(); // ウインドウの幅
7        $('#Graph').css({width:width}); // css変更
8      });
9    });
10    </script>