-1

I'm using C3.js to visualize data, and I don't understand how the positioning and sizing of the chart works.

When I add/initialize the chart, all other elements move. In other words: it's impossible to position any elements in the horizontal plane of the chart. This is not a problem until the chart is added to the page.

My HTML-code looks like this: 

<div id = "ChartContainer">

</div>

my Javascript code looks like this:

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

and my CSS-code looks like this:

#ChartContainer {
height: 50%; width: 75%;
top: 0%; left: 25%;
position: absolute;
}

#otherElement {
  height: 0%; width: 0%;
  top: 0%; left: 0%;
  background-color: blue;
  position: absolute;
}
martin
  • 1,894
  • 4
  • 37
  • 69
  • 2
    You haven't provided any of the other elements (in the html) that you're asking us to look at. How about putting it into a fiddle so we can see what problem you're having? – Sean Jun 30 '15 at 18:13

1 Answers1

0

Use the width and height property c3.js provides from its api

Suraj
  • 96
  • 1
  • 2
  • 13