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

As I can see on the fiddle, the container it's wrapped in is resizing so please try invoking the `reflow()` method on highcharts before considering others: http://api.highcharts.com/highcharts#Chart.reflow — wmash, Jun 28 '16 at 09:01
have you checked this: http://stackoverflow.com/questions/14100011/highcharts-redraw-vs-new-highcharts-chart — vijayP, Jun 28 '16 at 09:02
`redraw()` and `reflow()` are for different purposes. `redraw()` is to only be used if data is added dynamically. From what I can see, (and what I have tried) it does NOT alter the size of it. `reflow()` does. Please see the API link for reference — wmash, Jun 28 '16 at 09:04
I checked that link, but couldn't understand what to do where :( as I'm very new to jQuery & JS @vijayP — Riot Zeast Captain, Jun 28 '16 at 10:14
I have edited your fiddle: https://jsfiddle.net/dLujgtf9/8/. I attempted to apply a `setInterval` method. This partially works as the chart reflows perfectly when the alert is dismissed but not if the alert is not there. It's almost like it needs something before it to execute properly. Anyway, I'll have another look when I can but this is at least a step in the right direction :) — wmash, Jun 28 '16 at 10:34
yup that is what I really expecting but the alert is messing up... — Riot Zeast Captain, Jun 28 '16 at 10:45

score 9 · Accepted Answer · answered Jun 28 '16 at 10:48

9

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);

answered Jun 28 '16 at 10:48

wmash

4,032
3
31
69

Worked properly Thanks @wmash – Riot Zeast Captain Jun 28 '16 at 10:54

score 1 · Answer 2 · answered Jul 22 '16 at 17:53

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();
    }

answered Jul 22 '16 at 17:53

httpete

2,765
26
34

am not using in angularjs :( @httpette – Riot Zeast Captain Jul 22 '16 at 19:15
so modify however you wish with jquery – httpete Jul 22 '16 at 19:17

score -3 · Answer 3 · answered Jun 28 '16 at 10:16

-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?

answered Jun 28 '16 at 10:16

yu wayne

40
2

In my end its not at working, yup I cannot resize. @yu wayne – Riot Zeast Captain Jun 28 '16 at 10:18
This is resizing the container which OP has already accomplished. it's resizing the chart they are struggling with – wmash Jun 28 '16 at 10:31
If you resize the container, it should also resize the chart. Please see the post http://stackoverflow.com/questions/13768565/resize-height-with-highcharts. And my code did work on my computer(both container and chart). Maybe your can try to remove some of the css reference. – yu wayne Jun 28 '16 at 10:45
@yuwayne that's if the window is resized. Highcharts have only set up defaults for when the window is resized not just it's wrapping container. So, if the container is resized but the window is not, that event will not fire – wmash Jun 28 '16 at 10:51

window.resize() in Highcharts

zeasts

3 Answers3