ChartJS 饼图在移动设备上太小

5 html javascript chart.js chartjs-2.6.0

我正在尝试使我的 ChartJS 饼图在移动设备上具有响应性。所有标签和标题都可以正常缩放,但是当涉及到实际图表时, 它看起来像这样

这就是我希望它看起来像的样子

我尝试更改纵横比和响应性真/假值,但这没有任何作用。

有谁知道这里可能是什么问题?

JS:

Chart.defaults.global.defaultFontFamily = "Archivo";
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
      type: 'pie',
      responsive: true,
      maintainAspectRatio: false,
      data: {
          labels: ["Total Working Time", "Time Wasted On Scheduling"],
          datasets: [{
              data: [40-appendHours, 40-(40-appendHours)],
              backgroundColor: [
                '#73D500',
                '#FD4D7A',
              ],
              borderColor: [
                '#73D500',
                '#73D500'
              ],
              borderWidth: 5
          }]
      },
      options: {
        events: [],
        legend: {
          labels: {
            fontColor: '#44566c',
            fontSize: 15,
            fontStyle: "normal",
            fontFamily: "'Archivo', sans-serif"
          },
        },

        title: {
          display: true,
          text: 'Hours wasted by 1 person on scheduling per week',
          fontSize: 15,
          position: 'bottom',
          fontColor: '#44566c',
          fontFamily: "'Archivo', sans-serif"
        },
      }
  });

}); ///End
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="col-md-6 order-lg-2 order-md-2 order-sm-2 order-col-2 resultsBox">
 <div class="Task">
  <h3 class="resultsFont">Results</h3>
  <p class="descriptionFont" id="savings"></p>
 <hr />
  <canvas id="myChart" class="descriptionFont"></canvas>
 </div>
</div>
Run Code Online (Sandbox Code Playgroud)