当我尝试在 Angular 6 中使用 billboard.js 图表库时遇到图表大小问题

Question

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

After

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

Any help would be appreciated.

Answer 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