search

mrjoh3 / c3

c3 HTMLWidget Ploting
39 stars 51 forks source link

Inconsistent resize behavior in Rmarkdown #1

Open ThoDuyNguyen opened 8 years ago

ThoDuyNguyen commented 8 years ago

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 commented 8 years ago

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 https://github.com/mrjoh3/c3/issues/1, or mute the thread https://github.com/notifications/unsubscribe/AB1TAbsal2vFvOy7ainklmMAMvIFvnx5ks5qOVt4gaJpZM4I78UV .

mrjoh3 commented 8 years ago

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 commented 8 years ago

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

ThoDuyNguyen commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

Kind regards