CODEWITHSUNDEEP
jqueryhtmlcsshighcharts
dre
dre

Reputation: 1037

Highcharts dynamic height with table layout

Is it possible for the height of the charts in the following code snippet to resize automatically in the same way as the width does (see jsfiddle below)?

<div class="chartTable">
    <div class="chartRow">
        <div id="chart1" class="leftContainer"></div>
        <div id="chart2" class="rightContainer"></div>
    </div>
    <div class="chartRow">
        <div id="chart3" class="leftContainer"></div>
        <div id="chart4" class="rightContainer"></div>
    </div>
</div>

http://jsfiddle.net/cmoowwm1/

Commenting back in the "position:absolute" styles will illustrate how I would like it to work, but obviously need all 4 graphs in view.

Upvotes: 0

Views: 383

Answers (1)

Raein Hashemi
Raein Hashemi

Reputation: 3384

If you only want to use CSS, you need keep the first row position:absolute.

I used position:fixed for the second row and bottom: 0 to keep it bottom as a footer. So this will only work for a two row chart page. Here's a DEMO of what you are looking for.

Upvotes: 1

Related Questions