Chart height tests

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<h1>✅ Fixed height chart</h1>
<div style="height: 200px" id="chart1"></div>

<h1>✅ Percentage height chart inside fixed container</h1>
<div style="height: 200px">
    <div style="height: 100%" id="chart2"></div>
</div>

<h1>✅ Max height inside fixed container</h1>
<div style="height: 200px; overflow: hidden">
    <div style="max-height: 180px" id="chart3"></div>
</div>

<h1>✅ Flex grow inside fixed flexbox</h1>
<div style="display: flex; flex-direction: column; height: 400px; overflow: hidden">
    <div class="fixed-placeholder"></div>
    <div style="flex: 1" id="chart4"></div>
    <div class="fixed-placeholder"></div>
</div>

CSS

.fixed-placeholder {
    height: 100px;
    width: 100px;
    background-color: red;
}

JavaScript

const series = [{ data: [1, 4, 7, 8, 9, 3] }];

['chart1', 'chart2', 'chart3', 'chart4'].forEach(id => Highcharts.chart(id, { series }));