Highcharts showLoading displaced - asp.net-mvc

Question

When I call the showLoading method of a chart the show loading screen appears but on the wrong position. I am not sure which is causing this. I have created a plunk (http://plnkr.co/edit/FdBqoPJZmopNc4s33Jcg) but I could not reproduce the wrong behaviour with the plunk.
$scope.renderColumnChart = function (date) {
var chart = {};
$.each(Highcharts.charts, function (index, c) {
if (c && c.renderTo.id === "column-chart")
chart = c;
});
$scope.columnChartConfig.series = [];
$scope.columnChartConfig.title.text = moment(date).format("DD.MM.YYYY");
$scope.columnChartUrl = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, SharedService.getPeriodFromDate($scope.dimension, date), date, 0, 0, 1, [19]));
chart.showLoading(); //TODO show loading wrong place
$q.all([
ColumnChartService2.getData($scope.columnChartUrl, globalConfig.oDataServer + globalConfig.ageGroups)
]).then(function (result) {
$scope.columnChartConfig.series.push({
name: "Personen pro Altersgruppe",
color: Highcharts.getOptions().colors[0],
data: result[0].data
});
//chart.hideLoading();
});
}
regards
Additional Information
Here is the full code of the angular controller and the html template.
Controller
ManagementReporting.controller("CustomerHeadCountController", ['$rootScope', '$scope', '$q', 'globalConfig', 'SharedService', 'MultiLineChartService', 'ColumnChartService2',
function ($rootScope, $scope, $q, globalConfig, SharedService, MultiLineChartService, ColumnChartService2) {
SharedService.cleanUpCharts();
$scope.title = 'Customer Head Count';
var init = function () {
$scope.dimension = SharedService.getGranularity()[0];
var ranges = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.before = ranges[3];
$scope.after = ranges[5];
$scope.referenceDate = new Date(moment().subtract("month", 0).format("YYYY-MM-DD"));
$scope.period = SharedService.getPeriods($scope.dimension, $scope.referenceDate).period;
};
init();
// TODO add charts
$scope.refresh = function () {
$scope.processCharts();
};
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////// EVENTS ////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// when route change!!!!
$scope.$on('$routeChangeSuccess', function () {
$rootScope.$broadcast('change.activeSite', 'Anzahl Kunden auf basis verrechneter Einsätze (jeder Kunde in der Dimension einmalig gezählt)');
$scope.processCharts();
});
$scope.processCharts = function () {
$("#modal-processing-report-data").modal("show");
$scope.lineChartConfig = MultiLineChartService.getConfig();
$scope.lineChartConfig.series = [];
$scope.url = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, $scope.period.value, $scope.date, $scope.before, $scope.after, 1, [17]));
$scope.urlRegression = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, $scope.period.value, $scope.date, $scope.before, $scope.after, 1, [21]));
$scope.columnChartConfig = ColumnChartService2.getConfig();
$scope.columnChartConfig.series = [];
$q.all([
MultiLineChartService.getData($scope.url),
MultiLineChartService.getRegressionData($scope.urlRegression)
]).then(function(result) {
$scope.lineChartConfig.series = result[0].data;
$scope.lineChartConfig.series.push(result[1].data);
$scope.renderColumnChart($scope.date);
var normal = Enumerable.from(result[0].data).where(function(record) {
return record.name === "Normal";
}).toArray()[0];
$scope.average = parseFloat(normal.avg.toFixed(2));
$scope.minimum = normal.min;
$scope.maximum = normal.max;
$("#modal-processing-report-data").modal("hide");
});
}
$scope.$on('multilinechart.click', function (angularEvent, highchartEvent, point) {
var date = new Date(highchartEvent.point.x);
$scope.renderColumnChart(date);
});
$scope.renderColumnChart = function (date) {
var chart = {};
$.each(Highcharts.charts, function (index, c) {
if (c && c.renderTo.id === "column-chart")
chart = c;
});
$scope.columnChartConfig.series = [];
$scope.columnChartConfig.title.text = moment(date).format("DD.MM.YYYY");
$scope.columnChartUrl = SharedService.createUrl(SharedService.createUrlDataByPeriod($scope.dimension, SharedService.getPeriodFromDate($scope.dimension, date), date, 0, 0, 1, [19]));
//chart.showLoading(); //TODO show loading wrong place
$q.all([
ColumnChartService2.getData($scope.columnChartUrl, globalConfig.oDataServer + globalConfig.ageGroups)
]).then(function (result) {
$scope.columnChartConfig.series.push({
name: "Personen pro Altersgruppe",
color: Highcharts.getOptions().colors[0],
data: result[0].data
});
//chart.hideLoading();
});
}
}]);
HTML Template
<div>
<!--
<div class="row">
<div data-ng-include="selectionHeader.url"></div>
</div>
-->
<div class="dateselector"
data-dimension="dimension"
data-before="before"
data-date="date"
data-period="period"
data-after="after"
data-refresh="refresh()">
</div>
<div class="well">
<highchart id="line-chart"
data-config="lineChartConfig"
data-chart="lineChart" />
<div class="text-center">
<span translate>Minimum: </span> {{minimum}}, <span translate>Maximum: </span> {{maximum}}, <span translate>Durchschnitt: </span> {{average}}
</div>
</div>
<div class="well">
<highchart id="column-chart"
data-config="columnChartConfig"
data-chart="columnChart" />
</div>
<!-- Modal Section -->
<div class="modal fade" id="modal-processing-report-data" tabindex="-1" role="dialog" aria-labelledby="modal-processing-report-data-label" aria-hidden="true" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-processing-report-data-label">Processing...</h4>
</div>
<div class="modal-body">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>
</div>