Highcharts + Bootstrap.

Question

When I put my chart inside Bootstrap .table-responsive, the chart does not fill the whole td. Here's the jsFiddle problem . As you can see, I set the width to 100% and this worked in the grid.

There seems to be a strange error, when I open the chrome console with the "Check Element", the problem is solved (also in jsFiddle).

How can I make the chart fill in everything <td>by default?

Answer 1

After initialization, you need to set up the widthchart setting . After initialization, Highcharts only adapts to the resize event (try, if you resize the window, it will change the width), so you may need to trigger a resize event.

Here is jsFiddle (ab) using the resize event: http://jsfiddle.net/b9DMn/1/

Highcharts automatically gets the width of its container when creating its chart, but if you set a breakpoint, you will see that the table cells are still divided evenly at this point in time. In fact, this is a chart that causes the table to grow the correct cell. If you can fix the width of the cell, this will probably help too.

jsFiddle, , : http://jsfiddle.net/b9DMn/2/