I have a problem with highcharts and bootstrap modals. The highcharts chart does not fit correctly inside the container.
The chart should has the width = 100% but it has width = 600px, the default modal width. This is not ok if you use the modal-sm, modal-lg, ... classes.
I have read another post about this and the solution is do a $(window).resize() call or use the highchart reflow method.
Ok. I'm tried this using the "rendered" promise of ui.bootstrap for angularjs, but the render produces a ng-class attribute inside the modal container with the modal size (modal-lg, modal-sm, ...).
This parameter is rendered in a real class="modal- lg" after this call.
You can test this:
myapp.controller('myctrl', function ($scope, $uibModal) {
$scope.openModal = function() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'modal.html',
controller: 'modalctrl',
size: 'lg'
})
.rendered.then(function() {
console.log('.modal-dialog').attr('class')
});
};
});
This returns the main class "modal-dialog" but not the ng-class rendered.
I solved it with a not-ideal solution:
.rendered.then(function() {
$('.modal-dialog').addClass('modal-xl');
$(window).resize();
});
Is there any better way to do this?
Sources:
index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="openModal()">Open Modal</button>
</div>
</div>
</body>
<script>
var myapp = angular.module('myapp', ["highcharts-ng", "ui.bootstrap"]);
myapp.controller('myctrl', function ($scope, $uibModal) {
$scope.openModal = function() {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'modal.html',
controller: 'modalctrl',
size: 'lg'
})
.rendered.then(function() {
$('.modal-dialog').addClass('modal-xl');
$(window).resize();
});
};
});
myapp.controller('modalctrl', function($scope) {
$scope.mychart = {
options: {
xAxis: {
categories: [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]
},
title: 'demo',
},
series: [
{name: 'serie1', data: [252, 259, 300, 312, 323, 354, 369, 378, 399]},
],
loading: false,
}
});
</script>
</html>
modal.html
<div class="modal-body">
<highchart id="mychart" config="mychart"></highchart>
</div>
