search

palantir / plottable

:bar_chart: A library of modular chart components built on D3
http://plottablejs.org/
MIT License
2.97k stars 223 forks source link

When chart is rendered in a hidden tab, it does not take full width and height of its parent wrapper #3104

Open awsumnik opened 7 years ago

awsumnik commented 7 years ago

Hi,

I am having a case where the chart is rendered in different tabs, with one of the tabs as open by default. So any chart which is rendered in this tab comes along properly, but the chart that is rendered in a html wrapper in hidden tab doesn't takes full width and height of its parent wrapper element.

Also I have another case when I specify static width and height for the svg container and the chart is rendered in hidden tab, then the other components of chart like chart title, axes, legends etc are not getting rendered properly.

Here is the fiddle link of what i am trying to achieve - http://jsfiddle.net/awsumnik/ytbp8p1j/6/

Description of tabs - Tab 1 = chart rendered in currently displayed tab (all fine) Tab 2 = chart assigned 100% height and width of parent wrapper (not coming fine) Tab 3 = chart given static width (chart components like chart title, axes not coming fine)

CalvinFernandez commented 7 years ago

It looks like those hidden tabs have no measurable size because they're display: none.

The fix is to either show/hide your tabs in a way that preserves their dimension info or redraw your charts each time you change tabs.

Here's the redraw example : http://jsfiddle.net/t1anrvtd/1/