Reflow of the chart inside table

[pawelfus]

Example: http://jsfiddle.net/FzXEM/

When resizing iframe/window chart reflow fine when makes it bigger, but doesn't reflow when makes it smaller.

Possible workaround: use setSize() method: http://jsfiddle.net/FzXEM/1/

[TorsteinHonsi]

Not sure whether to call this a bug. The chart prevents the container from shrinking.

The pure CSS workaround is to set position:absolute and width: 100% on the container, then it won't affect the layout of the table cell: http://jsfiddle.net/highcharts/rLq7R/

[sjakops]

I'm not sure if absolute positioning will work - what if I have some content below that row? Seems it will be overwritten by the chart: http://jsfiddle.net/zLxRu/1/

Anyway, I think it is a bug in the sense that I would expect highcharts to work the same whether the container is a div or a table cell (divs are not prevented from shrinking).

[TorsteinHonsi]

If you give the table cell a height it works:
http://jsfiddle.net/highcharts/zLxRu/2/

[sjakops]

and what if I need the table cell to dynamically adapt to the height of the chart?:) (I do..)

[sjakops]

are there any plans to fix this issue?

[TorsteinHonsi]

Well, not currently... Here's a way to let the height of the table cell adapt to the chart: http://jsfiddle.net/highcharts/zLxRu/3/

[sjakops]

Thanks for a solution again, though this one had some side effects on padding/margin of containing elements - was trying to solve this by using setSize, which however required some bookkeeping of chart objects, and in the end it somehow was not possible to get the correct current cell size.. Turned out an easier hack was to catch the window's resize event and set the size of the containing cell when the event fires (as I am using em sizes I had to add a dummy div from which to get the correct size including margin/padding (jquery width() only returns pixel values))

[onemenny]

this is very frustrating - i cannot seem to find a solution either: http://forum.highcharts.com/highcharts-usage/chart-not-responsive-in-display-table-t32424/

it should be handled automatically by highcharts and not by external JS. the proposed solution is only half way there, cause you need to consider other DOM elements along the way with their padding and margin...

this should be fixed by highcharts and not by the users

[TorsteinHonsi]

The problem is that the chart is an SVG image and behaves like any other image inside a table cell. While expanding the table, it works well because the table cell actually expands to, so our logic picks it up and upsizes the chart image. But when contracting the table, the image sits there and blocks the cell, so it won't get smaller than the image. So our model of adapting the SVG size to the table cell makes no difference.

[onemenny]

Thanks @highslide-software
Your answer, as usual, is something i can live with understanding the cause. very different from the "throw away" i got in your forums.

at the end i managed to mimick the table behavior using flex and min-height styles...

[dluk]

solution for this was adding this to css:
.highcharts-container, .highcharts-container svg { width: 100% !important; }
Edit: noticed it didn't work with Firefox, so needed to add
table { table-layout: fixed; }
see the example: http://jsfiddle.net/FzXEM/10/

[TorsteinHonsi]

Thanks for the fix, that's a good one!

[nawlbergs]

@dluk This mostly works... but I am still having issues when I have multiple columns of charts in a table. Id post a fiddle but my code is thiiiiick.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!