Bootstrap mesh does not work with canvas

Question

I am trying to place a chart using Chart.js in a line with span6 . Chart.js uses <canvas> and needs the height and width properties. I set height to what I need and width to 100%, but it does not stretch to fill the div that is set to 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> 

Answer 1

I managed to solve your problem!

Check out this jsFiddle .

Try resizing the panels to see them in action.

Basically, you call a function that responds to window resizing:

 $(window).resize(respondCanvas); 

which initiates the selection of the width and height of the parent element that it is encapsulated, and then redraws the chart.

 function respondCanvas() { c.attr('width', jQuery("#daily").width()); c.attr('height', jQuery("#daily").height()); //Call a function to redraw other content (texts, images etc) myNewChart = new Chart(ct).Bar(data, options); } 

You can customize all the tiny bits like your own identifiers, classes, width and height.

Answer 2

in a javascript file where you add all the chart parameters

 new Chart(ctx).Line(data, options ); //Boolean - If we want to override with a hard coded scale scaleOverride : true,