0

前提

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
イメージ説明

現状

両端の棒グラフが、半分切れてしまっている
イメージ説明

問題だと思われること

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

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

初歩的な質問かもしれないのですが、解決策を教えていただけると大変助かります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>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。