Highcharts select chart by button click and adjust width

0
votes

I have built multiple charts and want to select one of them by button click. Each button shows the div of one chart and hides the others: 

$(document).ready(function(){
    $("#standd").click(function(){
        $("#Standd").show();
        $("#Verlaufw").hide();
        $("#Verlaufd").hide();
        $("#Standw").hide();

});

The divs have a width of 100% by css class. 

.width {
  min-width: 320px; 
  max-width: 100%; 
  margin: 0 auto;
   }

When I change the size of the browser the actual chart adapts the width to the new size. But the others in the background keep their original size. When I click a button and display another chart it has the wrong size. What can I do? See fiddle

1
htmlbuttonhighcharts

1 Answers

1
votes

You can call the reflow method to make sure that the chart is fit to its container:

$("#standd").click(function() {
  $("#Standd").show();
  $("#Standd").highcharts().reflow();
  ...
});

Live demo: https://jsfiddle.net/BlackLabel/vyusa02g/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow