Search code examples
d3.jscss-floatjsfiddlehandsontablec3.js

How to size the chart to always fill the space

I have bodged the following HTML/CSS to get the chart to fill 65% of the space, leaving room for the 300px table. I would like the chart to always fill all the remaining space, regardless of how much or little is left.

https://jsfiddle.net/horacebury/2vc606wx/17/

HTML:

<div ng-app="App">
  <div ng-controller="TodoCtrl">
    <div id="tablecontainer">
      <table class="tgh">
        <tr>
          <td>Auxilliary Power</td>
        </tr>
      </table>
      <div id="example"></div>
      <table class="tg">
        <tr>
          <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
        </tr>
      </table>
    </div>
    <div id="c3chart"></div>
  </div>
</div>

CSS:

#tablecontainer {
  float: right;
}

#c3chart {
  width: 65%;
}
Solution

  • Answered awesomely by @mgraham:

    Have a look at the overflow:hidden answer here --> stackoverflow.com/questions/1260122/…