TargetProcess/tauCharts

Chart Reflows and "Grows" on resize

Closed this issue · 3 comments

jwang commented

How do I go about preventing this behavior?

https://jsfiddle.net/jd6xud7h/2/

When I "resize" the browser, the chart starts expanding/resizing to strange sizes.

Also, 'entire-view' doesn't seem to work when using % or EMs for container sizes.

Hi @jwang

Thanks for issue report. I will look into.

For a while as a workaround I suggest you to set fixed height directly to a chart container.

https://jsfiddle.net/jd6xud7h/3/

@jwang,

It looks like the issue is related to an HTML markup.

Once you set on target DIV

height: 100%

It tries to infer height from parent container and "min-height" is not applicable here. There should be specified concrete height value. Compare height / min-height approaches here:

https://jsfiddle.net/onpL0xg9/

In the first case height of target DIV (chart container) is undefined. It depends on a dynamic chart size itself. As a result during resize process we got positive feedback loop and growing chart issue.

Once we use the second approach to set "height" - taucharts determine a size correctly and the issue dissapears. Try it here:

https://jsfiddle.net/onpL0xg9/1/

Let me know if you need additional clarification or expect another behavior.

jwang commented

@vladminsky ok. thanks.