I was working on a dashboard which has a doughnut chart on the right side of the page. While I was successful at making the the itself i've been struggling with the height of the the chart. If canvas tag is set using attributes the the whole chart stretches and the height of the chart has a default size of of (128px).

Here is the code below:-

    <input type="text" name="balance" value="42" id="balance" hidden>
    <div class="chartWrapper">
        <canvas id="myChart" height="180px"></canvas>
        <div class="ChartContent">
             <h2>84%</h2>
        </div>
     </div>

//START DOUGHNUT CHART

var balance = document.getElementById('balance').value;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Withdrawal Amount', 'Balance Amount'],
        datasets: [{
            data: [80, 124, balance],
            backgroundColor: [
              '#232c66',
              '#ffa5a2',
            ],
            borderColor: [
              '#232c66',
              '#ffa5a2',
            ],
            borderWidth: 2,
            hoverBorderWidth: 1,
            weight: 2,
            clip: 
            {
              left: 5, 
              top: 5, 
              right: -2, 
              bottom: 0
            }
        }]
    },
    options: {
        cutoutPercentage: 180,
        rotation    : 5,
        animation: true,
      legend: {
        position: 'chartArea',
        padding: 1
      },
      layout: {
          padding: 20
      }
    }
});


//END DOUGHNUT CHART