I have a dashboard page with visualisations where their height and width are set to be 100% of their container. When I shrink the page manually it works, but when I switch screens I have to refresh the page to get the same effect. I think this could be because of the divs/containers resizing.

I am currently fitting 4 visualisations on this page. This is the html layout.

<div class="top">
  <div class="count">
    <app-visualisation></app-visualisation>
  </div>
  <div class="bar">
    <app-category-bar-graph></app-category-bar-graph>
  </div>
</div>

<div class="bottom">
  <div class="donut">
    <app-category-pie-graph></app-category-pie-graph>
  </div>
  <div class="histogram">
    <app-category-bar-graph-segmented></app-category-bar-graph-segmented>
  </div> 
</div>

I am using primeng’s charts, which use chartjs, for the visualisations. They all have near identical implementations but here is the bars:

<p-chart type="bar" 
    [data]="data" 
    [options]="options"
    width="100%"
    height="100%">
</p-chart>

I have also tried setting the width and height dynamically in the component through an event listener but I get the same results.

@HostListener('window:resize', ['$event'])
    onResize(event: Event) {
        const parent = d3.select('div.bar');
        this.setWidthAndHeightToParent(parent);
    }
    
    setWidthAndHeightToParent(parent: any = d3.select('div.bar')) {
        let dim = DimensionService.getHTMLDimensions(parent);
        this.width = dim.width;
        this.height = dim.height;
    }