Hia,

I'm looking to change the height of my charts but can't find a setting for it.

I want to shrink the padding or space on either side of the chart to increase the overall size. Since the height is dynamic (since it's a row/col) that should be fine however, I can't figure out how to shrink the space on either side.

Does this make sense?

Thanks!

<div class="row">
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col">
            <canvas id="doughnut-chart1" class=""></canvas>
            <script type="text/javascript">
              $(document).ready(function(){
                const dataDoughnut1 = {
                  type: 'doughnut',
                  data: {
                    labels: ['Label1', 'Label2', 'Label3'],
                    datasets: [
                      {
                        label: 'Label4',
                        data: [60, 13, 27],
                        backgroundColor: [
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(54, 162, 235, 0.2)',
                        ],
                        borderColor: [
                          'rgba(75, 192, 192, 1)',
                          'rgba(255,99,132,1)',
                          'rgba(54, 162, 235, 1)',
                        ],
                        borderWidth: 1,
                      },
                    ],
                  },
                };
                const dataDoughnutoptions1 = {
                  dataLabelsPlugin: true,
                  options: {
                    legend: {
                      display: false,
                    },
                    plugins: {
                      datalabels: {
                        formatter: (value, ctx) => {
                          let sum = 0;
                          let dataArr = dataDoughnut1.data.datasets[0].data;
                          dataArr.map((data) => {
                            sum += data;
                          });
                          let percentage = ((value * 100) / sum).toFixed(2) + '%';
                          return percentage;
                        },
                        color: 'black',
                        labels: {
                          title: {
                            font: {
                              size: '12',
                            },
                          },
                        },
                      },
                    },
                  },
                };
                new mdb.Chart(document.getElementById('doughnut-chart1'), dataDoughnut1, dataDoughnutoptions1);
              })
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>

Seems like height is based on the width of the chart and adds padding or space on top or bottom. I want the canvas size to be the same as it was on the old version, aka dynamic height instead of a forced square (while still using the current version).

Current version of charts canvas size:

Old version of charts canvas size: