Take a look at this code pen showcasing the code I will insert here: https://codepen.io/andrewsunglaekim/pen/MmmxvO
Ignore the messy html, I simply copied a basic high charts demo.
The HTML is straightforward:
<div class="flexContainer">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class='flexToggle'>Flex it</div>
</div>
Basic chart nested in a flex container.
The CSS:
.flexContainer {
display: flex;
}
#container {
transition: flex 0.5s ease;
flex: 3;
background: red;
}
.flexToggle {
transition: flex 0.5s ease;
flex: 1;
background: green;
}
#container.flexed {
flex: 1;
}
.flexToggle.flexed {
flex: 3;
}
This simple jQuery script toggles the flexed class:
$(".flexToggle").on("click", function(){
$("#container").toggleClass("flexed")
$(".flexToggle").toggleClass("flexed")
})
I aim for the chart to adapt dynamically with the transitioning flex elements. Most solutions involve resizing windows, but that's not feasible in this scenario. Setting up an interval to redraw during the transition seems clumsy. Is there a specific configuration element I'm overlooking that could simplify this process?