Charts rendered in hidden DIVs will not display until browser resize

[codyseibert]

If there is already a work around for this, please let me know, but here is my use case / issue.

I am using foundation's tabset directive to build up tabs and their corresponding containers. I have some the chart.js graphs being defined inside a hidden container; therefore, the charts have no container width or height when it comes to rendering the graphs.

Would there be a way to achieve this? Could you potentially add in a "reset" watch to the angular-chart.js which will destroy and recreate the chart?

[jtblin]

This looks similar to #17 which itself is same as chartjs/Chart.js#512.

Could you just set the data when the tab is shown/active? That will draw the chart when the tab is first shown.

[leonetnl]

Check out my fork (dont know how to link to it, my first contribution on github). You can now send a angular broadcast '$reload' to repaint the graphs.

[jtblin]

Cool, why not submitting a PR? ;)

https://help.github.com/articles/using-pull-requests/

Links to a PR is as simple as putting a link to it in the comment.

[jaman1020]

I've added @leonetnl 's changes to my personal copy of angular-chartjs, and the broadcast works, but it doesn't seem to redraw the chart. I know this is more of a Chart.js issue, but I've been pulling my hair out with it for a few hours now and can't get it working. Right now I'm calling resetChart(chart) in the broadcast $reload function, which seems to do exactly what the chartjs solution says to do (destroy old chart and create new one)

If the original chart is drawn successfully, I can call chart update/create/whatever. However, if the initial draw call comes when the div is hidden, it doesn't draw. I get this error -
Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.

No matter how I try to update the chart - whether I update it, destroy it, create a new one, it just doesn't work. Its almost like the canvas permanently fails the draw, and refuses to reload unless part or all of the html itself is reloaded.

I'm willing to integrate the changes and submit a pull request myself, but I can't get it drawing correctly.

[jaman1020]

So I've figured out the cause - although not a solution (at least for me). It looks like the elem variable in the directive is never updated when the element changes height, so it retains the 0px height it gets when the div is not visible. I'm personally using angular-ui bootstrap tabs, so when I tab back to the original tab, the elem variable has a 0px height, although the actually element it is referring to no longer does. That is why the destroy/create method recommended for chartjs doesn't work, even if its called when the div is visible.