Highcharts rendering series only on window resize

Question

I'm having a strange error when creating charts with the code below.

The problem is that the series are not rendered until I resize the browser window.

Before resize:

After resize:

Code in html-template:

<article class="charts-wrapper">
  <single-series-chart data="vm.data"></single-series-chart>
</article>

Code in directive:

angular.module('app.cdn')
  .directive('singleSeriesChart', singleSeriesChart);

singleSeriesChart.$inject = ['_', 'Highcharts', 'ChartHelper'];

function singleSeriesChart(_, Highcharts, ChartHelper) {
  return {
    restrict: 'AE',
    scope: {
      title: '@',
      data: '=',
      metrics: '=',
      charttype: '=',
      showLoading: '='
    },
    template: '<section class="stackedCharts"><article class="stackedChart" id="volumeChart"></article><article class="stackedChart" id="viewsChart"></article><article class="stackedChart" id="hitsChart"></article></section>',
    link: function(scope, element, attrs) {
      var charts;

      function createChart() {
        Highcharts.setOptions({
          chart: {
            type: 'area'
          }
        });

        volumeChart = new Highcharts.Chart({
          chart: {
            renderTo: 'volumeChart'
          },
          title: {
            text: 'Distributed Volume'
          }

        });
        viewsChart = new Highcharts.Chart({
          chart: {
            renderTo: 'viewsChart',
          },
          title: {
            text: 'Asset Views'

          }

        });
        hitsChart = new Highcharts.Chart({
          chart: {
            renderTo: 'hitsChart'
          },
          title: {
            text: 'Number of Hits'
          }

        });
        charts = [volumeChart, viewsChart, hitsChart];
      }

      scope.$watch('data', function(newValue) {
        if (Object.keys(newValue).length === 3) {
          createChart();
          redrawSeries(newValue, charts);
        }

      }, true);

      function redrawSeries(newValue, charts) {
        for (var i = 0; i < charts.length; i++) {
          if (charts[i].series.length > 0) {
            charts[i].series[0].remove(false);
          }
          charts[i].addSeries({
            name: charts[i].title.textStr,
            color: ChartHelper.getColorByMetric(charts[i].title.textStr)
          }, true);

          _.each(newValue, function(data, index) {
            for (var j = 0; j < data.dataSeries.length; j++) {
              charts[i].series[0].addPoint([data.dataSeries[j].tValue, data.dataSeries[j].value], false, false);
            }
          });
        }

      }
    }
  };

}