Estaba trabajando en un tablero que tiene un gráfico de anillos en el lado derecho de la página. Si bien tuve éxito en hacer el mismo, he estado luchando con la altura del gráfico. Si la etiqueta del lienzo se configura con atributos, todo el gráfico se estira y la altura del gráfico tiene un tamaño predeterminado de (128 px).

Aquí está el código a continuación: -

 <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