响应式Chart.js画布barplot高度？

Question

I have having difficulties setting the height of my Chart.js barplot correctly (see screenshot). The

responsive:true,
maintainAspectRatio: false,

does not seem to be taken into account here. I am expecting to have the plot height to take 100% of the box.

Could anyone advice, as I scanned around, and didn't really found much.

 <div class="col-md-4" style="flex-direction: inherit"> <div class="box box-primary"> <div class="box-header with-border"> <i class="fa fa-line-chart"></i> <h3 class="box-title">dataset growth</h3> </div> <div id="boby" class="box-body"> <div class="chart-container" style="position: relative"> <div class="chart"> <canvas id="barChart" width="100%" height="100%"></canvas> </div> </div> </div> </div> </div> <!-- page script --> <script> var numberWithCommas = function(x) { return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); }; var dataHsap = [395, 2829, 6498]; var dataAtha = [0, 0, 1272]; var dates = ["2015", "2018", "2020"]; var bar_ctx = document.getElementById('barChart'); var boby = document.getElementById('boby'); var data = { labels: dates, datasets: [{ label: 'Human', data: dataHsap, backgroundColor: "#3c8dbc", hoverBackgroundColor: "#77b2d4", hoverBorderWidth: 0 }, { label: 'Thaliana', data: dataAtha, backgroundColor: "#00a65a", hoverBackgroundColor: "#00cc70", hoverBorderWidth: 0 }, ] }; var options = { responsive: true, maintainAspectRatio: false, animation: { duration: 10, }, tooltips: { mode: 'label', callbacks: { label: function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel); } } }, scales: { xAxes: [{ stacked: true, gridLines: { display: false }, }], yAxes: [{ stacked: true, ticks: { callback: function(value) { return numberWithCommas(value); }, }, }], }, legend: { display: true } }; var bar_chart = new Chart(bar_ctx, { type: 'bar', data: data, options: options }); </script> <div class="col-md-4" style="flex-direction: inherit"> <div class="box box-primary"> <div class="box-header with-border"> <i class="fa fa-line-chart"></i> <h3 class="box-title">ReMap dataset growth</h3> </div> <div id="boby" class="box-body"> <div class="chart-container" style="position: relative"> <div class="chart"> <canvas id="barChart" width="100%" height="100%"></canvas> </div> </div> </div> </div> </div> <!-- page script --> <script> var numberWithCommas = function(x) { return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); }; var dataHsap = [395, 2829, 6498]; var dataAtha = [0, 0, 1272]; var dates = ["2015", "2018", "2020"]; var bar_ctx = document.getElementById('barChart'); var boby = document.getElementById('boby'); var data = { labels: dates, datasets: [{ label: 'Human', data: dataHsap, backgroundColor: "#3c8dbc", hoverBackgroundColor: "#77b2d4", hoverBorderWidth: 0 }, { label: 'Thaliana', data: dataAtha, backgroundColor: "#00a65a", hoverBackgroundColor: "#00cc70", hoverBorderWidth: 0 }, ] }; var options = { responsive: true, maintainAspectRatio: false, animation: { duration: 10, }, tooltips: { mode: 'label', callbacks: { label: function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel); } } }, scales: { xAxes: [{ stacked: true, gridLines: { display: false }, }], yAxes: [{ stacked: true, ticks: { callback: function(value) { return numberWithCommas(value); }, }, }], }, legend: { display: true } }; var bar_chart = new Chart(bar_ctx, { type: 'bar', data: data, options: options }); </script> 

Answer 1

Your chart doesn't know how big it should be. You should add a height-property to the div that contains your canvas.

<div class="chart" style="height: 300px">
  <canvas id="barChart" width="100%" height="100%"></canvas>
</div>