HIghcharts - ширина диаграммы не размер исходного контейнера

Question

Я пытаюсь выяснить, почему у меня есть that chart шире контейнера. Я заметил, что если я удалю ширину полностью for the first screenshot, а затем установите ширину: 100% в следующем. Тем не менее, я не могу форсировать эти стили, и я думаю, что это не правильный путь.

Вот настройки моего графика. Кроме того, я не использую другие 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

Я не уверен, что это правильный способ зафиксировать это, но, похоже, работает. Я устанавливаю ширину контейнера директивы диаграммы.

.chart-wrapper { 
    width: 99%; 
} 

Затем в коде директивы onDataLoaded или windowResized Я называю это:

function resize() { 
    height = chart.height; 
    width = $(".chart-wrapper").width(); 
    chart.setSize(width, height, doAnimation = false); 
}