C3: Can I change the size of the chart by percentage and not by pixels?

[samur3]

[masayuki0812]

Currently it's not possible. Instead, I think you can do that by setting css width or height to the element where the chart binds to. Could you try that? Thanks.

[masayuki0812]

It seems already solved, so please let me close.

[michaelfeihstel]

The width of the chart container seems to be ignored. I have the problems that my charts sometimes appear in tabs that aren't active on page load - when switchting to those tabs, the chart overflows it's parent container.

Only when I resize the window the chart will suddenly scale to the correct size. Any way to avoid this issue?

[bobinthomas]

Any one , please? i have same issue as above

[thomaspessato]

Having the same problem as @michaelfeihstel

[ghost]

@thomaspessato @bobinthomas @michaelfeihstel
best fix I found was to resize as michael said... but you can do it so it's nearly unnoticeable
First get the page width of browser:
https://stackoverflow.com/questions/1038727/how-to-get-browser-width-using-javascript-code

Then you can resize it:
http://c3js.org/samples/api_resize.html

My mix looks like this:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

setTimeout(function () {
    var pagewidth = getWidth() - 50;
    chart.resize({width:pagewidth})
}, 100);

Notice I subtracted 50 from the getWidth just so it fits within the page even with the horizontal scroll bar making the width sometimes wider..
The stack page has jquery method for window width too if you have jquery on your page. seems to work with any browser with my code though, didn't check old IE browsers though

Also if you cause an error and the charts re-draw themselves it seems to fit the screen, lol....

[ksgupta]

This is an old issue but just ini case someone needs help on this:

$timeout(function(){
            var CHART = c3.generate({
              bindto: '#chart',
              data: {
                columns: [
                  ['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]
                ]
              }
            });
            }, 500);

This contains the chart within the container element boundaries.