Responsive chart with width and height to 100%

Hello

I am trying to implement a responsive pie chart with width and height to 100%.

The html code: <google-chart id="chart" [data]="pieChartData"></google-chart>

The relevant scss code:

#chart {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width:100%;
    height:100%;
    @include rem(max-width, 350px); // just calculates the rem
    @include rem(max-height, 350px); // just calculates the rem
}

and the chartData object:

{
	chartType: "PieChart",
	dataTable: dataTable,
	options: {
		legend:"none",
		height: "100%",
		width: "100%",
	    chartArea: {
	        height: "94%",
	        width: "94%"
	    }
	}
}

For some reason setting “100%” in width and height does not work, hard coding those to e.g 350 will not make it responsive. Although the #chart in my browser ends up to 350 x 350 the enclosed div defaults to 350 x 200 I have tried using “100%” in plain javascript/css/html and it works. Any idea how to implement a responsive chart or what am am I doing wrong?

[gurachan]

any updates? a version that uses angular flex is nice too

[thc2018]

This - https://codepen.io/flopreynat/pen/BfLkA works for me!