chart.jsで作成した折れ線グラフをスマートフォン表示の際は横スクロールさせて表示させたい。

chart.jsにて折れ線グラフを作成し、HTMLに表示させました。
パソコン表示の時は特に問題がないのですが、スマートフォンでの表示になるとグラフ部分だけはみ出てしまい、無理にスクロールすると、ページ全てがスクロールされてしまい、非常に格好の悪いレイアウトになってしまいます。

一つの対処法として、スマートフォン表示の際はグラフのサイズ自体をもっと小さくするという方法もあるのですが、これだと横幅が狭すぎるので、サイズをそのままにグラフだけを横スクロール出来ればと思ったのですが、どうしたら良いのか分かりません。
どなたかアドバイス頂けないでしょうか。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8</head>
9<body>
10
11<nav class="navbar navbar-dark bg-dark">
12  <a class="navbar-brand" href="#">テスト</a>
13  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
14    <span class="navbar-toggler-icon"></span>
15  </button>
16  <div class="collapse navbar-collapse" id="navbarText">
17    <ul class="navbar-nav mr-auto">
18      <li class="nav-item active">
19        <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
20      </li>
21      <li class="nav-item">
22        <a class="nav-link" href="#">リンク1</a>
23      </li>
24      <li class="nav-item">
25        <a class="nav-link" href="#">リンク2</a>
26      </li>
27    </ul>
28    <span class="navbar-text">
29    </span>
30  </div>
31</nav>
32
33<div class="linechart_container">
34  <canvas id="RateChart"></canvas>
35</div>
36
37<style>
38@media screen and (min-width:300px) {
39    .linechart_container {
40      width:1000px;
41      height:300px;
42      margin: auto;
43    }
44}
45
46
47 @media screen and (min-width: 768px) {
48   .linechart_container {
49     width:1000px;
50     height:350px;
51     margin: auto;
52   }
53 }
54
55</style>
56<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
57<script>
58var ctx = document.getElementById("RateChart");
59var myLineChart = new Chart(ctx, {
60  type: 'line',
61  data: {
62    labels: ['6月', '7月', '8月', '9月', '10月', '11月', '12月'],
63    datasets: [
64      {
65        label: '体重の推移',
66        data: [75, 74, 77, 75, 74, 75, 74, 75],
67        borderColor: "rgba(255,0,0,1)",
68        backgroundColor: "rgba(0,0,0,0)"
69      }
70    ],
71  },
72  options: {
73    title: {
74      display: true,
75      responsive: true,
76      maintainAspectRatio: false,
77    },
78    scales: {
79      yAxes: [{
80        ticks: {
81          suggestedMax: 40,
82          suggestedMin: 0,
83          stepSize: 10,
84          callback: function(value, index, values){
85            return  value +  'kg'
86          }
87        }
88      }]
89    },
90  }
91});
92</script>
93
94<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
95<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
96<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
97
98
99</body>
100
101</html>
102