I have encountered a strange issue when using Apexcharts with flexbox while resizing the screen.
It works when we decrease the screen width from greater than 961px to lower than 960px, but not the opposite.
Here is sample code: https://codepen.io/sonle999/pen/PoXmVww
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div class="chart flex">
<div class="full">
<div id="orderChart"></div>
</div>
<div class="full">
<div id="customerChart"></div>
</div>
</div>
</body>
Css:
.flex {
display: flex;
flex-wrap: wrap;
}
.full {
flex-basis: 0;
flex-grow: 1;
}
.chart {
gap: 15px;
}
@media (max-width: 960px) {
.chart {
flex-direction: column;
}
}
Javascript:
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var orderChart = new ApexCharts(document.querySelector("#orderChart"), options);
orderChart.render();
var customerChart = new ApexCharts(document.querySelector("#customerChart"), options);
customerChart.render();