How do I redraw/rescale a google linechart on window resize?
To redraw or scale Google chart on window resize with JavaScript, we can redraw the chart when we resize the screen. const resize = () => { const chart = new google. visualization. LineChart( document.
Specify Chart Size One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container <div> element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML.
To redraw only when the window resize is completed and avoid multiple triggers, I think is better create an event:
//create trigger to resizeEnd event $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 500); }); //redraw graph when window resize is completed $(window).on('resizeEnd', function() { drawChart(data); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With