Hide / Show of chart containers fails to render chart properly
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
I am having an issue on a site that (unfortunately) I cannot link to. I have attempted to create a mock of the problem in JSFiddle but I am not getting the same behavior. Essentially I am using the c3 charts as widgets for a dashboard page. Our application allows a user to have multiple "tabs" open like the worksheets in excel, where the dashboard page is the main tab and is always open. When a user creates a new tab it essentially hides the others and only show's the tab they have selected. At some point during this process when they click back to the dashboard tab, the c3 chart is rendered without taking into account the right hand boundary of the div it is bound to. This results in a long stretched chart that runs into other widgets on the page. I was unable to reproduce this in JSFiddle but I can reproduce "something". I have been able to fix the rendering of the chart by manually calling $.resize() on the widget container any time tab visibility changes. Just wanted to know if anyone else has experienced this type of thing. On the JS fiddle below you can see some other wacky behavior where if you hide the chart, then resize the output container (drag the window boundaries or something) and then show the widget the chart fails to render at all. Clicking the "resize" button calls the $.resize() event which re-renders the chart.
http://jsfiddle.net/24enb809/1/
Contributor guide
Assessment
This issue has not been assessed yet.