When I put my chart inside of Bootstrap's .table-responsive the chart doesn't fill the entire td. Here's a jsFiddle of the problem. As you might see I've set the width to 100%, and this worked in the grid.
There seems to be a strange bug aswell, when I open the chrome console with "Inspect element" the problem is solved (happens in the jsFiddle aswell).
How can I make the chart fill the entire <td> by default?
When I put my chart inside of Bootstrap's .table-responsive the chart doesn't fill the entire td. Here's a jsFiddle of the problem. As you might see I've set the width to 100%, and this worked in the grid.
There seems to be a strange bug aswell, when I open the chrome console with "Inspect element" the problem is solved (happens in the jsFiddle aswell).
How can I make the chart fill the entire <td> by default?
1 Answer
Reset to default 6You'll have to set the width setting of chart after initialization. After initialization, Highcharts only adapts on a resize event (try it out, if you resize the window it will change width), so you might want to trigger an resize event.
Here is a jsFiddle (ab)using a resize event: http://jsfiddle/b9DMn/1/
Highcharts does automatically gets the width of its container when its creating its chart, but if you put a breakpoint there you'll see that the table cells are still divided equally at that point in time. In fact, it is the chart that triggers the table to grow the right cell. If you can fixate the cell width, that would probably help too.
Here is a jsFiddle fixating the width of the cells, so they don't grow and shrink when content gets added: http://jsfiddle/b9DMn/2/