HIGHcharts - Diagrammbreite nicht die Größe des übergeordneten Containers

Question

Ich versuche herauszufinden, warum ich that chart breiter als der Container habe. Ich habe festgestellt, dass, wenn ich die Breite komplett entfernen for the first screenshot und dann Breite: 100% in der nächsten. Ich bin jedoch nicht in der Lage, diesen Stil zu erzwingen und ich denke, das ist nicht der richtige Weg.

Hier sind die Einstellungen meines Diagramms. Ansonsten benutze ich kein anderes 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

Ich bin mir nicht sicher, ob dies der richtige Weg ist, das zu beheben, aber scheint zu funktionieren. Ich habe die Breite des Containers der Chart-Direktive festgelegt.

.chart-wrapper { 
    width: 99%; 
} 

Dann in der Richtlinie Code onDataLoaded oder windowResized Ich nenne das:

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