Столкнулся с проблемой: отображение morris chart в jquery tabs, как решить?

(function($) { 
  $(function() { 
    $("ul.tabs__caption").on("click", "li:not(.active)", function() { 
 
      $(this) 
        .addClass("active") 
        .siblings() 
        .removeClass("active") 
        .closest("div.tabs") 
        .find("div.tabs__content") 
        .removeClass("active") 
        .eq($(this).index()) 
        .addClass("active"); 
 
    }); 
  }); 
})(jQuery); 
 
 
//moris report 
 
$(document).ready(function() { 
 
  var data = [{ 
        date: '2017-11-09', 
        a: -1238 
      }, 
      { 
        date: '2017-11-23', 
        a: -1000 
      }, 
      { 
        date: '2017-12-27', 
        a: -980 
      }, 
      { 
        date: '2017-12-28', 
        a: -640 
      } 
    ], 
    config = { 
      data: data, 
      xkey: 'date', 
      xLabelFormat: function(date) { 
        return date.getDate() + '/' + (date.getMonth() + 1); 
      }, 
      yLabelFormat: function(a) { 
        return -a.toString() + ''; 
      }, 
      ykeys: ['a'], 
      labels: ['kwr', 'date'], 
      fillOpacity: 1, 
      hideHover: 'auto', 
      behaveLikeLine: true, 
      resize: true, 
      pointFillColors: ['orange'], 
      pointStrokeColors: ['orange'], 
      lineColors: ['orange'], 
      lineWidth: 2, 
      pointSize: 3, 
      gridTextSize: 10 
    }; 
  config.element = 'line-chart-1'; 
  Morris.Line(config); 
 
}); 
 
$(document).ready(function() { 
 
  var data = [{ 
        date: '2017-11-09', 
        a: -750 
      }, 
      { 
        date: '2017-11-23', 
        a: -630 
      }, 
      { 
        date: '2017-12-27', 
        a: -400 
      }, 
      { 
        date: '2017-12-28', 
        a: -250 
      } 
    ], 
    config = { 
      data: data, 
      xkey: 'date', 
      xLabelFormat: function(date) { 
        return date.getDate() + '/' + (date.getMonth() + 1); 
      }, 
      yLabelFormat: function(a) { 
        return -a.toString() + ''; 
      }, 
      ykeys: ['a'], 
      labels: ['bsr', 'date'], 
      fillOpacity: 1, 
      hideHover: 'auto', 
      behaveLikeLine: true, 
      resize: true, 
      pointFillColors: ['orange'], 
      pointStrokeColors: ['orange'], 
      lineColors: ['orange'], 
      lineWidth: 2, 
      pointSize: 3, 
      gridTextSize: 10 
    }; 
  config.element = 'line-chart-2'; 
  Morris.Line(config); 
});

<div class="tabs"> 
 
  <ul class="tabs__caption"> 
    <li class="active">KWR</li> 
    <li>BSR</li> 
  </ul> 
 
  <div class="tabs__content  active"> 
 
    <div id="line-chart-1" class="chart"></div> 
    <!--kwr-chart--> 
  </div> 
 
  <div class="tabs__content"> 
 
    <div id="line-chart-2" class="chart"></div> 
    <!--bsr-chart--> 
  </div> 
</div>