html - Bootstrap grid not working with canvas -

i'm trying place chart using chart.js on row span6. chart.js uses <canvas> , needs height , width property. i've set height need , width 100% doesn't stretch fill div set span6.

any ideas?

<div class="row" style="padding-top: 20px;">   <div class="span6">     <div id="daily">       <canvas id="daily-chart" width="100%" height="400px"></canvas>     </div>   </div> </div> 

i managed solve problem!

please check jsfiddle.

try resizing panels see in action.

basically, call function responds resize of window:

$(window).resize(respondcanvas); 

that triggers fetch of width , height of parent element encapsulated in , redraws chart.

function respondcanvas() {     c.attr('width', jquery("#daily").width());     c.attr('height', jquery("#daily").height());     //call function redraw other content (texts, images etc)     mynewchart = new chart(ct).bar(data, options); } 

you can adjust tiny bits own ids, classes, width , heights.