Highcharts dynamic width adaptation

author(s):

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//code.highcharts.com/stock/highstock.src.js"></script>
<script src="//rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.css">
<div id="static-chart" style="min-width: 350px; width: 90%; height: 400px"></div>
<div ng-app="Bootstrap">
	<div ng-controller="TestController">
    <highchart id="ng-chart" config="chart" style="min-width: 350px; width: 90%; height: 400px"></highchart>
    <button ng-click="addValues()">Add values</button>
  </div>
</div>

JavaScript

var chartData =  {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Limons', 'Plums']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'purple'
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: 'white'
            }
        }
    },
    series: [{
        name: 'John',
        data: [900.2, 300.8, 400.2, 700.3, 200.4]
    }, {
        name: 'Jane',
        data: [258, 232, 3591, 231, 143]
    }, {
        name: 'Joe',
        data: [3000, 4431, 4351, 2434, 5645]
    }]
};

Highcharts.setOptions({
	lang: {
		decimalPoint: ',',
		thousandsSep: '.'
	}
});

Highcharts.chart('static-chart', chartData);

var bootstrapModule = angular.module('Bootstrap', ['highcharts-ng']);

bootstrapModule.controller('TestController', ['$scope', function($scope) {
	$scope.chart = chartData;
  
  $scope.addValues = function() {
  	$scope.chart.series[0].data.push(100);
  	$scope.chart.series[1].data.push(681);
  	$scope.chart.series[2].data.push(2057);
  };
}]);