HIghcharts - chart width not the size of the parent container - angularjs

Question

I am trying to figure out why I have that chart wider than the container. I noticed that if I remove the width completely for the first screenshot and then set width: 100% in the next. However, I am not able to force this styles and I think this is not the right way to go.
Here are the settings of my chart. Apart from that, I do not use any other css.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container10',
type: 'line',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
spacingRight: 5,
height: 370,
width: 770
},
title: {
text: 'Database volume'
},
colors:['#229369', '#00526F'],
xAxis: {
categories: catValues
},
yAxis: [{
title: {
text: 'Table size in MB'
},
labels: {
style: {
color: '#229369'
}
}
},
{
title: {
text: 'Index size in MB'
},
labels: {
style: {
color: '#00526F'
}
},
opposite: true
}],
tooltip: {
valueSuffix: ' MB'
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
name: 'Table',
data: series1,
}, {
name: 'Index',
yAxis: 1,
data: series2
}]
});

Answer 1

I am not sure if this is the correct way of fixing that, but seems to work. I set the width of the container of the chart directive.
.chart-wrapper {
width: 99%;
}
Then in the directive code onDataLoaded or windowResized I call this:
function resize() {
height = chart.height;
width = $(".chart-wrapper").width();
chart.setSize(width, height, doAnimation = false);
}