Highcharts width flow out of parent div

Question

Я пытаюсь создать приборную панель, где я хочу получить диаграмму с использованием highcharts и поле действия в row и, в свою очередь, две кнопки в поле действия в column. Я хочу, чтобы поле действия обернуло содержимое и диаграмму, чтобы оставить оставшееся пространство. Но я не ожидаю результата. chart занимает больше ширины, чем его parent div, то есть его container. Вот мой код HTML.

<md-content flex layout-padding> 
    <md-card layout="row" layout-wrap> 
     <div flex layout-padding> 
      <highchart id="summary-chart" config="dashboard.chartConfig"></highchart> 
     </div> 
     <div layout-align="start center" layout="column" layout-padding> 
      <div layout-align="start center" layout-fill> 
       <img src="../../../assets/images/computer.png"> 
       <label layout-fill>Computer</label> 
      </div> 
     </div> 
    </md-card> 
</md-content> 

Вот то, что я ожидал:

Это то, что я получаю в результате:

Примечание: значок скрыт диаграммой

Answer 1

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

Во-первых, дать элемент гибкого Div, который содержит ваш Highcharts визуализации свой собственный идентификатор (в данном примере, chartContainer):

<md-content flex layout-padding> 
    <md-card layout="row" layout-wrap> 
     <div flex layout-padding id="chartContainer"> 
      <highchart id="summary-chart" config="dashboard.chartConfig"></highchart> 
     </div> 
     <div layout-align="start center" layout="column" layout-padding> 
      <div layout-align="start center" layout-fill> 
       <img src="../../../assets/images/computer.png"> 
       <label layout-fill>Computer</label> 
      </div> 
     </div> 
    </md-card> 
</md-content> 

Далее, когда chartContainer ДИВ изменяется, установите размер highchart элемента в соответствовать ширине и высоте, что DIV:

$(".chartContainer").resize(function() { 
    $('#summary-chart').highcharts().setSize(
     $(".chartContainer").width(), // new width of the containing div 
     $(".chartContainer").height(), // new height of the containing div 
     false // don't animate the chart itself changing 
    ); 
}); 

Пожалуйста, обратите внимание, что я делаю предположение, что highcharts элемент может быть передан с использованием значения setSize(), как со стандартными элементами div.

Дайте мне знать, поможет ли это для вас.

Answer 2

Добавьте этот код в файле CSS

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