Chartjs. How to adjust the height of the chart according to the size of the table? Ionic 3

0

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"
}
    
asked by anonymous 17.05.2018 / 19:36

1 answer

0

The problem was in the filter. I was using a modal that sent the parameters to another view this.navCtrl.push(IndicadoresPage, {consulta: consulta}); . I changed to this.viewCtrl.dismiss(consulta) and captured the data with onDidDismiss() .

Then I changed to chart.canvas.parentNode.style.height = 'XXXpx' instead of changing div

    
17.05.2018 / 21:52