It seems that the pivot table integration does not allow to size C3 charts to use the available space. According to the documentation and this example: pivotUI() with C3js demo - JSFiddle - Code Playground the size of the chart should follow the size of the container element if not explicitly set. In the given example this works fine.
Within Cuba it also seems to do so, but takes the overall <div> of the pivot table as the leading size. In my project, but also in the samples as shown on https://demo.cuba-platform.com/sampler/#! (e.g. the editable pivot table and then select stacked bar chart), this behavior can be seen.
I’ve fiddled around to control the behavior through CSS but was unable to.
I do think this is in issue related to Cuba (as the original pivot table implementation works ok). Is there any fix/workaround to get a properly sized chart that uses the available space?
After an investigation, it turns out that the PivotTable gets width and height of page container and apply it for the c3 renderers. You can see it here.
If we add some components which occupied some spaces then the scrollbars will appear, because the PivotTable doesn’t use a size of parent div container, but the whole page size.
Thanks for the follow-up. I would like to configure the PivotTable and the c3 charts such that they use the available space - preferably with a min-width / min-height. But I understand this is not possible currently due to the issue. Or do you know any workaround?