javascript - How to resize charts to fit the parent container with Google API -

so created combo chart using visualization api google, im having problems resizing said chart fit parent container

that's how looks on website, parent container's width 1 hovered. , want chart fill entire parent's width.

i have panel system, in each tab have different chart. first 1 works charm, dont have problem 1 fills parent's container width correctly, second 1 one im having problems with.

here's html

 <div class="tab-pane fade in active" id="anuales">     <div id ="anual-bar-chart" height ="500px" ></div>  </div>  <div class="tab-pane fade in" id="semestre-1">     <div id ="semester-1-chart" height="500px"></div>  </div> 

and here's js file draw charts

google.load("visualization", "1", {packages:["corechart", 'bar']}); google.setonloadcallback(drawchart); function drawchart() {     var data = google.visualization.arraytodatatable([         ['año', 'nacimiento', 'reconocimiento', 'adopción simple', 'matrimonios', 'divorcios', 'defunciones', 'sentencias', 'actas foráneas', 'promedio'],         ['1997',  39520,732,39,10332,489,6033,88,0,7154],         ['1998',  39113,728,61,9908,607,6261,82,0,7095],         ['1999',  41007,825,58,10476,611,6103,74,0,7394],         ['2000',  40337,898,30,10479,685,6198,80,0,7338],         ['2001',  38132,847,10,9856,849,6288,78,0,7008],         ['2002',  36933,856,7,9532,826,6425,96,0,6834],         ['2003',  38688,858,63,9600,915,6731,139,0,7124],         ['2004',  39612,919,40,9088,962,6674,199,0,7187],         ['2005',  40985,1053,6,8785,1037,6874,215,0,7369],         ['2006',  38863,1031,28,9023,1063,6954,164,0,7141],         ['2007',  42757,1226,0,9318,1177,7169,3,0,8596],         ['2008',  41310,1268,1,8842,1224,7676,1,0,7540],         ['2009',  41155,1227,4,8185,1136,7757,5,0,7434],         ['2010',  10867,1258,3,8268,1200,8250,3,330,7522],         ['2011',  41760,1314,2,8977,1356,8077,5,987,7810],         ['2012',  41553,1386,4,9240,1400,8622,7,782,7874],         ['2013',  40953,1415,0,9726,1603,9107,11,622,7930],         ['2014',  40981,1305,0,9713,1516,9349,5,619,7936],         ['2015',  27017,887,0,6342,1227,3085,3,398,5245],     ]);  var options = {      titletextstyle: {color:'white'},     backgroundcolor: {fill: 'transparent'},     chartarea: {width:'85%',height:'65%'},     vaxis: {textstyle:{color:'white'}},     legend:{textstyle: {color: 'white'}, position: 'bottom'},     height: 350,     haxis: {textstyle:{color:'white'}},     seriestype: 'bars',     series: {8 : {type: 'line'}} };  var chart = new google.visualization.combochart(document.getelementbyid('anual-bar-chart')); chart.draw(data, options); var data2 = google.visualization.arraytodatatable([     ['mes', 'nacimiento', 'defunciones', 'matrimonios', 'divorcios', 'reconocimientos', 'adopción simple', 'sentencias', 'actas foráneas', 'promedio'],     ['ene-15',3865,897,586,130,138,0,0,38,0],     ['feb-15',3322,793,818,166,143,0,0,62,0],     ['mar-15',3314,802,745,156,88,0,0,52,0],     ['abr-15',3289,714,653,159,106,0,1,35,0],     ['may-15',3153,718,662,155,20,0,0,37,0],     ['jun-15',3349,728,901,162,103,0,0,42,0],     ['jul-15',3254,697,797,168,10,0,2,70,0],     ['ago-15',3462,736,1182,131,123,0,0,62,0],  ]);  var options2 = {      titletextstyle: {color:'white'},     backgroundcolor: {fill: 'transparent'},     chartarea: {width:'85%',height:'65%'},     vaxis: {textstyle:{color:'white'}},     legend:{textstyle: {color: 'white'}, position: 'bottom'},     height: 350,      haxis: {textstyle:{color:'white'}},     seriestype: 'bars',     series: {8 : {type: 'line'}} };  var chart2 = new google.visualization.combochart(document.getelementbyid('semester-1-chart')); chart2.draw(data2, options2); } 

the 1 that's named char2 @ bottom chart im having problems with. put other 1 u see i'm using same configuration, somehow it's displaying charts different.

can tell me can do, cause i've been looking around , there's nothing. tried resizing "chartarea" configuration api mentioned, takes out labels, doesn't fit parents container.

google charts don't resize automatically. have redrawn when things resize (and showing/hiding resize). believe code below, ripped off this question should solve problem (you need jquery too):

//create trigger resizeend event      $(window).resize(function() {     if(this.resizeto) cleartimeout(this.resizeto);     this.resizeto = settimeout(function() {         $(this).trigger('resizeend');     }, 500); });  //redraw graph when window resize completed   $(window).on('resizeend', function() {     drawchart(data); });