Inconsistent resize behavior in Rmarkdown

[ThoDuyNguyen]

My code: https://gist.github.com/ThoDuyNguyen/fe3545153b09d849614f23584b2dfcd0

I expect these 2 charts would fit perfectly to the panel. But you could see that only the first one is.

[mrjoh3]

the c3() function currently has default widths and heights of 800px and
300px. To fill the div you should use c3(data, height = NULL, width =
NULL). If you run the code in rstudio you will see the plots render as
expected.

There is however definitely something going on in the interaction with
flexdashboard, even if you use c3(data) in both panels the sizing is
different. I have not used flexdashboard before. I will investigate some
more and see if I can determine the issue

On 23 June 2016 at 01:57, Thọ Duy Nguyễn notifications@github.com wrote:

My code:
https://gist.github.com/ThoDuyNguyen/fe3545153b09d849614f23584b2dfcd0

I expect these 2 charts would fit perfectly to the panel. But you could
see that only the first one is.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#1, or mute the thread
https://github.com/notifications/unsubscribe/AB1TAbsal2vFvOy7ainklmMAMvIFvnx5ks5qOVt4gaJpZM4I78UV
.

[mrjoh3]

still trying to track this down, it has something to do with the {.storyboard} flexdashboard option. When this option is removed both plots fill the frame. Even with the {.storyboard} when you change the size of the window both plots resize and fit the frame.

[mrjoh3]

this may be an issue with flexdashboard as another htmlwidget is having a similar problem. See flexdashboard issue and stackoverflow question

[ThoDuyNguyen]

The package flexdashboard is pretty new and I think it requires some coding effort to make the widget working like we expect.

I have tested many packages with flexdashboard and there were some remaining issues though some packages are fine (I only used demo code provide by the authors of packages).

Below are some of my tests:

http://rpubs.com/thonguyenduy/dashboard-1
http://rpubs.com/thonguyenduy/demo-ramchart-package
http://rpubs.com/thonguyenduy/sequence-of-data-visualization
http://rpubs.com/thonguyenduy/interactive-document-rmarkdown
http://rpubs.com/thonguyenduy/test-morrisjs-package

[mrjoh3]

I have added resize function and it works in all instances except for flexdashboards. After a lot of dead ends I have found the cause to be in the el.getBoundingClientRect().height; function returning 0 for the hidden tab.

For the moment if you use tabs set a height value using c3_chart_size. I will keep try to find a solution

[ThoDuyNguyen]

Thank you for your effort.
I'll test it when you finish.

Kind regards