Highcharts 100% (height width) in Card from ng2-admin - Angular2 ng2-admin Template

Question

i wont use Highcharts in akveo/ng2-admin template. Install also gevgeny/angular2-highcharts.

But Highcharts does not change the size and does not adapt to the parent container.

Css class not work:

.highcharts-container {
  width:100% !important;
  height:100% !important;
}

component.ts

import {Component, ElementRef} from '@angular/core';

import 'style-loader!./Chart.scss';

@Component({
    selector: 'ngbd-tabset-basic2',
    templateUrl: './chart.html'
})
export class Chart {
    options: Object;
    chart: Object;

    constructor() {
        this.options = {
            chart: {
            },
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }

    onChartLoad(chart) {
        chart.reflow();
    }
}

Chart.scss

@import "../../theme/sass/conf/conf";

.highcharts-container {
  width:100% !important;
  height:100% !important;
}

chart.html

<div class="widgets">

    <div class="row">
        <ba-card title="Highcharts Demo" baCardClass="xmedium-card">
             <chart [options]="options" (load)="onChartLoad($event.context)" ></chart>
        </ba-card>
    </div>
</div>

Example result

Thank you for the support

Answer 1

This worked for me - only css:

chart {display: block;}

Answer 2

The inner CSS classes of the chart can be used.
The highcharts basically contains highcharts-container and highcharts-root classes.
So, if you would like to adjust the chart size I would suggest you use.

.highcharts-root {
    width:500px !important;
}