window.resize() in Highcharts

Question

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

//High Chart JS
$(function () {
  $('#container').highcharts({

    backgroundColor: {
      stops: [
        [0, '#2a2a2b'],
        [1, '#3e3e40']
      ]
    },
    chart: {
      type: 'area',
      backgroundColor: "#000"
    },
    title: {
      text: 'US and USSR nuclear stockpiles',
      color: '#fff'
    },
    subtitle: {
      text: 'Source: <a>' +
      'Xylines</a>'
    },
    xAxis: {
      allowDecimals: false,
      labels: {
        formatter: function () {
          return this.value; // clean, unformatted number for year
        }
      }
    },
    yAxis: {
      title: {
        text: 'Nuclear weapon states'
      },
      labels: {
        formatter: function () {
          return this.value / 1000 + 'k';
        }
      }
    },
    tooltip: {
      pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
    },
    plotOptions: {
      area: {
        pointStart: 1940,
        marker: {
          enabled: false,
          symbol: 'circle',
          radius: 2,
          states: {
            hover: {
              enabled: true
            }
          }
        }
      }
    },
    series: [{
      name: 'USA',
      data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
             1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
             27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
             26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
             24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
             22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
             10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
    }, {
      name: 'USSR/Russia',
      data: [null, null, null, null, null, null, null, null, null, null,
             5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
             4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
             15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
             33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
             35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
             21000, 20000, 19000, 18000, 18000, 17000, 16000]
    }]
  });
});

/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -220px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 220px;
    }

    #wrapper.toggled {
        padding-left: 52px;
    }

    #sidebar-wrapper {
        width: 220px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 52px;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
        padding-left: 52px;
    }
}   

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="blackrockdigital.github.io/startbootstrap-simple-sidebar/js/jquery.js"></script>
<!-- Sidebar -->
<div id="wrapper">

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand">
        <a href="#">
         Logo
        </a>
      </li>
      <li>
        <a href="#">Dashboard</a>
      </li>
      <li>
        <a href="#">Shortcuts</a>
      </li>
      <li>
        <a href="#">Overview</a>
      </li>
      <li>
        <a href="#">Events</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">
    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
    <div class="container-fluid" style="background:#000">
      <div id="container" style="background:#000"></div>
    </div>
  </div>
  <!-- /#page-content-wrapper -->

</div>

When I toggle the menu in Large and Medium screen I want the Chart to redrawn or resized, I tried many but dint got any output.

I tried this $(window).resize(); #container: redraw();

here's the jsfiddle link https://jsfiddle.net/dLujgtf9/

Can someone help me please, I got irritated up in this from last 2 days, my Boss is shouting like hell.....

Thanks & regards

zeasts

Answer 1

I have no idea why I have to requery, but this works for me.

    angular.element(window).trigger('resize');
    var allCharts = document.querySelectorAll('[data-highcharts-chart]');
    for(var x = 0; x<allCharts.length; x++){
        angular.element('[data-highcharts-chart=' + x + ']').highcharts().reflow();
    }

Answer 2

I have managed to amend the fiddle again to suit your needs I think: jsFiddle

Adding an anonymous function into the mix seemed to sort it:

setInterval(function() {
    $("#container").highcharts().reflow();
}, 1);

Answer 3

I added the following code and it works fine. It doesn't redraw but it resized.

$(window).resize(function() {

             $("#container").width($(window).width()-250);

     });

PS: I modified the following css setting:

@media(min-width:200px)

Are you sure you can't resize?