### 前提

Chart.js（バージョン2.8.0）で複合グラフを作っています。  
横軸：日付("2022-07-01"など)  
縦軸：整数と実数  
※横軸の表示をすっきりさせるため、xAxes.type='time'にしています。  
※xAxes.typeを設定しないとこの問題が生じないことは確認済みです。

### 目標

このページのグラフのように、すべての棒グラフを完全に描画したい  
<https://stopcovid19.metro.tokyo.lg.jp/cards/monitoring-number-of-confirmed-
cases>  
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-28/121ca6da-11a5-4794-83b6-f3e8e0c9dc7b.png)

### 現状

両端の棒グラフが、半分切れてしまっている  
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-28/297bd964-a5ec-4e38-9325-bc7ce23030db.png)

### 問題だと思われること

目標のグラフでは目盛りとグラフの両端の間に余裕があるが、現状のグラフでは目盛りがグラフの両端の上に乗っている。このために、両端の棒グラフが半分になっていると思われる。

**両端の棒グラフが切れないためにはどうしたらよいでしょうか？**

初歩的な質問かもしれないのですが、解決策を教えていただけると大変助かりますm(_ _;)m

### 以下、ソースコード

```

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    </head>
    <body>
        <canvas class="element1" id="myMixedChart"></canvas>
    
      <script>
        ///////////////////////グラフに入れる変数///////////////////////
        var chartVal_datetime = [<?php echo $datetime ?>];
        var chartVal_viewinc = [<?php echo $viewinc ?>];
        var chartVal_incmov = [<?php echo $incmov ?>];
      ////////// display chart//////////
      function dischart(xdata,ydata,movdata,canvasid){
        var ctx = document.getElementById(canvasid);
        window.dailychart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: xdata,
                datasets: [
                {
                    //折れ線グラフ
                    type: 'line',
                    data: movdata,
                    borderColor: "orange",
                    backgroundColor: "rgba(0,0,0,0)",
                    pointRadius:0,
                    lineTension: 0.5
                },  
                {
                    //棒グラフ
                    type: 'bar',
                    data: ydata,
                    backgroundColor: "green"
                }
            ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: false,
                scales: {
                        xAxes: [
                        {
                            type: 'time',
                            time:{
                                unit: 'day'
                            },
                            gridLines:{
                            display: false
                            }
                        }
                        ],
                        yAxes: [
                            {
                            ticks: {
                                suggestedMin: 0,
                            }
                        }
                    ]
                    },
                tooltips: {
                    mode: 'index'
                }
            },
        });
      }
      dischart(chartVal_datetime,chartVal_viewinc,chartVal_incmov,"myMixedChart");
    
      </script>
    </body>
    </html>
    
```
CC BY-SA 4.0
2022-09-28T10:52:51.207
91355
2022-09-28T13:34:20.707
2022-09-28T13:34:20.707
3060
53524
question
javascript html html5 html5-canvas chart.js
Chart.js で描画した棒グラフの両端が切れてしまう