I'm developing an application in Ionic 3, where I consume data from an API and display the data in a horizontal graph. The amount of data returned by the API is not standard, then the previously setada times the height in the CSS is not sufuciente ( Here and here ). And I can not do what the graph adjusts to the height. I already tried to assign height: auto
, but chart.js inserts the default height.
My HTML:
<div class="chart-container" >
<canvas #barCanvas></canvas>
</div>
My CSS
.chart-container{
position: relative;
margin: auto;
height: 110vh;
width: 80vw;
}
My JS
private loadChart(){
var backgroundColor = [];
if (this.barChart) {
this.barChart.destroy();
}
for (let x = 0; x < this.servicos.length; x ++) {
backgroundColor[x] = this.randomColor();
}
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'horizontalBar',
data: {
labels: this.temp.labels,
datasets: [{
label:this.consulta.Unidade,
data: this.temp.valores,
backgroundColor: backgroundColor,
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes:[{
ticks: {
beginAtZero: true
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
I tried to change the value of height
by comparing the size of the table before creating it. It worked the first time I entered the page, but I have a filter that makes a new request and creates a new chart, but the property height
% is assigned a default value of chart.js
if(this.servicos.length <= 10){
document.getElementById("chart-container").style.height = "300px"
}
if(this.servicos.length > 10 ){
document.getElementById("chart-container").style.height = "900px"
}