title: How to resize the Morris Charts?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Left Sidebar Toggle Menu JS
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    $(window).trigger('resize');
  });
  
  
  //Morris Charts
  jQuery.ready()
  var data = [
    { y: '2014', a: 50, b: 90},
    { y: '2015', a: 65,  b: 75},
    { y: '2016', a: 55,  b: 50},
    { y: '2017', a: 75,  b: 60},
    { y: '2018', a: 80,  b: 65},
    { y: '2019', a: 90,  b: 70},
    { y: '2020', a: 100, b: 75},
    { y: '2021', a: 115, b: 75},
    { y: '2022', a: 120, b: 85},
    { y: '2023', a: 145, b: 85},
    { y: '2024', a: 160, b: 95}
  ],
      config = {
        data: data,
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Total Income', 'Total Outcome'],
        fillOpacity: 0.6,
        hideHover: 'auto',
        behaveLikeLine: true,
        resize: true,
        pointFillColors:['#ffffff'],
        pointStrokeColors: ['black'],
        lineColors:['gray','red']
      };
  config.element = 'area-chart';
  Morris.Area(config);
  config.element = 'line-chart';
  Morris.Line(config);
  config.element = 'bar-chart';
  Morris.Bar(config);
  config.element = 'stacked';
  config.stacked = true;
  Morris.Bar(config);
  Morris.Donut({
    element: 'pie-chart',
    data: [
      {label: "Friends", value: 30},
      {label: "Allies", value: 15},
      {label: "Enemies", value: 45},
      {label: "Neutral", value: 10}
    ]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'&gt;&lt;/script&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.js'&gt;&lt;/script&gt;
  
  &lt;link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;link rel='stylesheet prefetch' href='http://cdn.oesmith.co.uk/morris-0.5.1.css'&gt;
  &lt;div class="container-fluid" id="wrapper"&gt;
     &lt;div id="sidebar-wrapper"&gt;
    &lt;aside class="sidebar"&gt;
    &lt;nav class="sidebar-nav"&gt;
    &lt;/nav&gt;
   &lt;/aside&gt;
  
   &lt;/div&gt;
  
  &lt;div id="page-content-wrapper"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-8"&gt;
          &lt;div class="panel panel-success"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;Sales&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;div id="area-chart" &gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm resizing the page by clicking 'menu toggle button', but when am doing so the Morris charts are not resized, I tried to trigger it, but its not working.
  I added a line of code in my js <code>$(window).trigger('resize');</code> but this dint worked. can any body help me? as I'm not aware of resize option in jQuery.</p>
  
  <p>Thanks
  -Riot Zeast Captain</p>