Responsive chart with width and height to 100%

[tchar]

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?

[jugarcip]

You got it finally?

Regards.

[jagrutijoshi95]

I am facing this issue, I want the charts to be responsive.
I tried above method, still not worked for me. Its taking static height=200 and width= 1566px.
Can anyone please help me on this, I want ng2-google-charts responsive.???

[gurachan]

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

[Aspro1]

Check out the page “ https://www.devrandom.it/software/ng2-google-charts/ ”. At the end of the page in the “Advanced usage” section there is a function named “myfunction”, which redraws the chart. Try using such a function hooked on a “resize” event.

[peterlitvak]

Is there any consensus out there on how to make the chart responsive? The options only takes integer values and interprets it as number of pixels. Setting outside div's width to % value works for the initial display but as was noted above doesn't work when changing the window size.
Is having onResize event handler and redraw the table really the only way to do it?

[peterlitvak]

Also it seems setting the height of the chart via the outer div doesn't work. The height can only be set via options.

[thc2018]

Did anyone found a solution?

[thc2018]

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