CODEWITHSUNDEEP
javascriptcsshighcharts
Andrew Kim
Andrew Kim

Reputation: 3335

Resize highchart based on container changing NOT window resize

Here's a code pen that illustrates the code I will place here: https://codepen.io/andrewsunglaekim/pen/MmmxvO

Don't mind the terrible html, I just copied a simple high charts demo.

The Html is simple:

<div class="flexContainer">
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <div class='flexToggle'>Flex it</div>
</div>

Simple chart nested within 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;
}

Here's the simple jQuery script that toggles the flexed class:

$(".flexToggle").on("click", function(){
  $("#container").toggleClass("flexed")   
  $(".flexToggle").toggleClass("flexed")
})

I want the chart to resize dynamically with the transitioning flex elements. Everything I've seen is a work around leveraging windows resizing, but I have no event like that in this case. Writing a setInterval to redraw during the transition seems hacky. Is there a configuration piece I'm missing that makes this really simple?

Upvotes: 2

Views: 2347

Answers (1)

Andrew Kim
Andrew Kim

Reputation: 3335

After some research, you can fix the horizontal scaling by simply adding 

.highcharts-container, .highcharts-container svg {
  width: 100% !important;
}

to the CSS

Upvotes: 4

Related Questions