responsive chart

[alirezaseif28]

responsive chart

[nbering]

Module sets up a handler to listen for window resize events, which emits resizeMsg:

angular-google-chart/src/googlechart.module.js

Lines 9 to 11 in cdcba1e

	angular.element($window).on('resize', function () {
	$rootScope.$emit('resizeMsg');
	});

And then registers to listen for that, and then triggers a re-draw of each chart instance:

angular-google-chart/src/GoogleChartController.js

Line 59 in cdcba1e

resizeHandler = $rootScope.$on('resizeMsg', drawAsync);

If it's not triggering a resize event when it goes fullscreen... you could use the promise returned by Element.requestFullscreen() and emit resizeMsg from the root scope to re-draw all the charts. I'm surprised it's not emitting the resize event already, though.

[nbering]

That looks like you probably just need to set the height property on the chart options.

https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options

[nbering]

The chart builds to the size you specify, or tries to fill the container.

You'll probably need some CSS to make the container element height-responsive. But how to do that is beyond the scope of this project.

Here's an example where I was working with something else (positioning image elements relative to the chart axes), but it's the only sample I have ready where I override the height of the chart in CSS.

https://codepen.io/nbering/pen/yNZxKr

Don't pay any attention to this part:

#container_div {
  position: relative;
}

It was needed for rendering the weather icons which is not what you're working on.

[alirezaseif28]

thanks a lot.
I trace code and see call emit resizeMsg.
but width fullscreen and not height responsive below image.
image
best regards

[alirezaseif28]

thanks a lot.
I want width and height responsive.
please help me.

[alirezaseif28]

thanks a lot.