chart.js：棒グラフをパソコンで見ると勝手に縦スクロールが設定されてしまう。

chart.jsで棒グラフを描写し、パソコン側で確認してみると、何故か縦スクロールしないと要素が全て見えない設定になっています。
出来ればスクロールせずとも最初から全ての要素を表示したいのですが、どうすれば良いでしょうか？

html
1<div style="width:100%; overflow-x: auto; overflow-y: visible">
2  <div class="barchart_container">
3    <canvas id='LineChart'></canvas>
4  </div>
5</div>

css
1@media screen and (min-width:300px) {
2
3    .barchart_container {
4      width:700px;
5      height:350px;
6      overflow-x: scroll;
7      margin: auto;
8    }
9
10}
11
12
13 @media screen and (min-width: 768px) {
14
15   .barchart_container {
16     width:1000px;
17     height: 350px;
18     margin: auto;
19   }
20
21 }
22

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

回答1件

ベストアンサー

heightの設定を変更してみてください

CSS
1
2@media screen and (min-width:300px) {
3
4    .barchart_container {
5      width:700px;
6      height:350px;
7      overflow-x: scroll;
8      margin: auto;
9    }
10
11}
12
13
14 @media screen and (min-width: 768px) {
15
16   .barchart_container {
17     width:1000px;
18     height: 500px;
19     margin: auto;
20   }
21
22 }
23