0

I am trying to use billboard.js chart library with Angular 6 and facing issue in chart size. When the page load for first time, chart size is bigger than it's div container and when i change browser window size, chart's size is automatically adjusted according to div container.

See the screenshot before and after window resize.

Before enter image description here

After enter image description here

I have tried to lazy load graph as mentioned here, but it's not working.

Any help would be appreciated.

McLosys Creative
  • 759
  • 4
  • 9
  • 19
  • 1
    Can you reproduce your problem in a stackblitz demo ? – abd995 Apr 02 '20 at 10:33
  • @abd995 here is the link for reproducing error https://stackblitz.com/edit/angular-whkwcr?embed=1&file=src/app/app.component.html here Angular 8 is used, but in our development environment, we are using Angular 6. Both have problem. – McLosys Creative Apr 02 '20 at 11:30

1 Answers1

1

Import AfterViewInit and add this method to the class. This line of code resizes the chart after the chart is rendered.

ngAfterViewInit() {
  this.charts[0].resize();    
}

You can also specify height and width to the resize function to resize chart to a specific size.

resize({height: '200px', width: '400px'});

Check the documentation here - https://naver.github.io/billboard.js/release/latest/doc/Chart.html#resize

abd995
  • 1,649
  • 6
  • 13