Angular HighChart in Tab Width

So, I have the following highChart tag:

<highchart id="chart1" config="chartConfig" ></highchart>

      

        
        
        
      

    

I now have multiple tabs on my system. it happens that the tall chart is not under the first tab.

Now when I click on the tab that contains the chart, the chart looks odd:

(You can't tell from this image, but it only uses 30% of the total width)

But resize the browser and then resize it so that the normal diagram fits it correctly inside the element (this also happens if I just open the console while I'm inside the tab):

I'm guessing it has something to do with the width of the element after it's created (possibly because it's in a different tab), but I'm not sure how to fix this.

I tried to put the style on a high level element so that it looks something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>

However, this caused the graph to end out of frame.

My diagram configuration

    $scope.chartConfig = {
};

$scope.$watchGroup(['login_data'], function(newValues, oldValues) {

    // newValues[0] --> $scope.line
    // newValues[1] --> $scope.bar

    if(newValues !== oldValues) {
        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'areaspline'
                }
            },
            series: [{
                data: $scope.login_data,
                type: 'line',
                name: 'Aktivitet'
            }],
            xAxis: {
                categories: $scope.login_ticks
            },
            title: {
                text: ''
            },
            loading: false
        }
    }
});