2

How to change chart's width to fill up div when hide/open left side nav menu using angular2-highcharts??

I tried to use style="display:block; width: 100% !important;" as recommended on most resources I found, but it didn't help.

Here is an example of using chart inside mat-sidenav-container and mat-sidenav-content:

Html

`<mat-sidenav-container class="sidenavContainer">
  <mat-sidenav #sideNav opened="true" mode="side" class="filters-viewer-sidenav">
    mat-sidenav
  </mat-sidenav>
  <mat-sidenav-content>
    mat-sidenav-content
    <button (click)="sideNav.toggle()">
      mat-sidenav-button
    </button>
    <div style="width: 100%; height: 100%"> 
      <chart [options]="options"  style="display:block; width: 100% !important;"></chart>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>`

css 

`html, body, mat-sidenav-container, .chart-wrapper {
  margin: 0;
  width: 100%;
  height: 100%;
}
.sidenav {
  width: 240px;
  height: 100%;
  box-shadow: 3px 0 6px rgba(0,0,0,.24);
}`

Added also screenshot: after I close left side nav menu, chart width stays the same. still_same_chart_width_size

akushylun
  • 151
  • 1
  • 5

2 Answers2

1

One of the solution was to delay rendering of the chart. I used ngAfterViewInit() lifecycle hook:

    ngAfterViewInit() {
     setTimeout(() => {
      if(this.chart) {
        this.chart.reflow();
      }
     },100);
    }
akushylun
  • 151
  • 1
  • 5
0

This can be done with css

chart {
    width: 100% !important;
    margin: 0 auto;
    display: block;
}

Check https://github.com/gevgeny/angular2-highcharts/issues/11

Patata
  • 273
  • 3
  • 18