NgxCharts resize when data changes

Question

I create an application using Swimlane Ngx Charts to graphically represent the data, but I get strange behavior when I update the data using the refresh button, which re-calls the GET function to update the data array. I use @ angular / flex-layout for a tile-like view, but without even using it, I still run into this problem - it just enlarges the parent container. I do not want to use hard-coded px values ​​in the property [view]because I want it to work with any size of the graph / tile.

I use a fairly simple vertical bar chart:

<div>
    <div>
        <ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true"></ngx-charts-bar-vertical>
    </div>
    <div>
        <!-- Got a table here -->
    </div>
</div>

To update mine dataArrayI do:

export class DashboardComponent implements AfterViewInit {
    constructor(private httpClient: HttpClient, private datePipe: DatePipe, private dataService: DataService) { }

    dataArray: any[] = [];

    getData(): void {

        this.dataService.getSomeData<any[]>().subscribe(d => {
                this.dataArray = d;
        });
    }

    // Init
    ngAfterViewInit(): void {
        this.getData();
    }
}

( ), , :

.

Answer 1

, div , CSS 40 50vh.

.

Answer 2

:

<div style="max-height: 50vh">
  <ngx-charts-bar-vertical   [results]="dataArray"
                             [legend]="true"
                             [xAxis]="true"
                             [yAxis]="true"
                             [xAxisLabel]="'Date'"
                             [yAxisLabel]="'# tickets Raised'"
                             [showXAxisLabel]="true"
                             [showYAxisLabel]="true"></ngx-charts-bar-vertical>
</div>

, .