CODEWITHSUNDEEP
csshighchartsangular
Salander
Salander

Reputation: 184

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

I am trying to render charts using angular2-highcharts. However, the chart does not inherit the height of the parent div. How can I rectify this?

Here is the plunker link : https://plnkr.co/edit/tk0aR3NCdKtCo3IpVPsf?p=preview

Any help 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;
}

Upvotes: 2

Views: 1611

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

Highcharts will not automatically assume the height of a containing element. You have to tell it how big it needs to be drawn, usually through CSS or inline styles.

I would suggest you try any of the following.

1) Set the height of the chart to auto:

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

2) Explicitly tell the chart to be the same height as its container:

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

3) Use an inline style to tell the chart how tall it should be:

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

I hope this is helpful for you!

Upvotes: 1

Related Questions