css - Charts rendered using highcharts in angular2 do not take the height of the parent -

i trying render charts using angular2-highcharts. however, chart not inherit height of parent div. how can rectify this?

here plunker link : https://plnkr.co/edit/tk0ar3ncdktco3ipvpsf?p=preview

any appreciated!

@component({ selector: 'my-app', directives: [chart_directives], styles: [`   chart {     display: block;   }   .c{     height:200px;   } `] template: `<div class="c"><chart [options]="options"></chart></div>` }) class appcomponent { constructor() {     this.options = {         title : { text : 'simple chart' },         series: [{             data: [29.9, 71.5, 106.4, 129.2],         }]     }; } options: object; } 

highcharts not automatically assume height of containing element. have tell how big needs drawn, through css or inline styles.

i suggest try of following.

1) set height of chart auto:

styles: [`     chart {         display: block;         height: auto; // tell chart fill 100% of height of 'c' container     }     .c{         height:200px;     } `] 

2) explicitly tell chart same height container:

styles: [`     chart {         display: block;     }     .c, chart { // assign attribute both 'c' , chart         height:200px;     } `] 

3) use inline style tell chart how tall should be:

template: `<div class="c"><chart [options]="options" style="height: 200px;"></chart></div>` 

i hope helpful you!