use updatechart function and call chart.reflow() inside that function

scope.updatechart = function(){
     scope.chart.reflow();
}

call updatechart method every 30 seconds using any refresh mechanism

i tested it, and it is working very well:

chart-tab is div, and contains high chart div, so you first need to define two divs, first for containing the chart('chart-container'), and second the container of 'chart-container' which is 'chart-tab', then one library must be added('resizesensor') for adding the event for 'chart-tab' div on-change , and here is the function as follows:

    new resizesensor($('#chart-tab'), function(){ 
    if(chart){  
    var wid = document.getelementbyid('chart-tab').clientwidth;
        var hei = document.getelementbyid('chart-tab').clientwidth;
        chart.update({
            chart: {
            width: wid,
            height: hei
            }
        });

    }
    });

you can make use of chart.update function from anywhere across your project.

   highcharts.charts.foreach(function (chart) {
    chart.update({ chart: { width: some value } }, true, true, true);
  })

in my case it was a loading issue that caused the chart container to be too narrow. if you make use of jquery then load your chart like this

$(document).ready(function() {
    let chart = highcharts.stockchart('chart-container', {
    [...]
    }
}

for me using angular it was solved by moving setting the option in ngafterviewinit!

if you do not provide width property to the chart, it should automatically get the width of the container. so just remove the width from the chart and give the container width: 100% and that should work.

if you want a specific width, just change the container width to a specific size. the chart should still be 100% of that size. jsfiddle

example:

html

<div id="container">
    <div id="chart"></div>
</div>

js

    var chart = new highcharts.chart({

    chart: {
        renderto: 'chart',
        margin: 0,
        height: 200,
        defaultseriestype: 'areaspline'
    },

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],

        marker: {
            enabled: false
        }
    }]
});

css

#container {
    width: 100%;
    height: 200px;
}

the issue with highcharts already reported here. to handle this we can do something like mentioned above. i was also facing the same problem so i have solved it by using

window.dispatchevent(new event('resize'));

after rendering my chart like :

this.chartdata={
...     //some required data object to render chart
}

 highcharts.stockchart('divcontainerid', this.chartdata, function (chart) {});
 window.dispatchevent(new event('resize'));

try this :

var height= $("#container").height();
var width= $("#container").width();

var chart = new highcharts.chart({
    chart: {
        renderto: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultseriestype: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});

just simply add css

.highcharts-container{
  width: 100% !important;
}

.highcharts-root{
  width: 100% !important;
}

i solved it by

window.dispatchevent(new event('resize'));

upd:

1. remove width and height attributes.
2. add into .css the following code in order to adjust chart block to 100% of #container:

chart { width: 100%; height: 100%; }

2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

see example http://jsfiddle.net/yfjlce3o/

set minpadding and maxpadding to 0, see: http://jsfiddle.net/skv9d/3/

if you remove the options width: 300, height: 200 like this:

    var chart = new highcharts.chart({
chart: {
    renderto: 'chart',
    margin: 0,
    defaultseriestype: 'areaspline'
},    

...

it will fill automatically the container.

the issue is because of jquery ui. after rendering your chart call this code to reflow the chart. this fixed my problem

chart.reflow();