Highcharts width flow out of parent div

Question

I am trying to create a dashboard where I want a chart made using highcharts and an action box in a row and in turn two buttons in action box in column. I want the action box to wrap the content and chart to take leftover space. But I am not getting expected result. The chart is taking more width than its parent div i.e. its container. Here is my HTML code.

<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>

Here is something that I expect:

This is what I am getting as result:

Note: The icon is hidden by the chart

I think that your problem may be connected with these SO topics: http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using and http://stackoverflow.com/questions/25398127/highcharts-wont-fit-in-bootstrap-3-modal-body — Grzegorz Blachliński, Aug 29 '16 at 10:02
Thanks. This seems like the solution. But chart.reflow() doesn't work straightaway. I am trying to find a work around. And I can not fix the width of the chart as I need to make them responsive. — Rusty, Aug 29 '16 at 10:06

score 0 · Answer 1 · answered Aug 29 '16 at 11:30

To keep your chart from pushing outside its boundaries while maintaining your responsive layout, I would suggest the following.

First, give the flex div element that contains your Highcharts visualization its own ID (in this example, 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>

Next, whenever chartContainer div is resized, set the size of the highchart element to match the width and height of that 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
    );
});

Please note that I'm making an assumption that the highcharts element can be passed values using setSize() as with standard div elements.

Let me know whether this is helpful for you.

Nope. Doesn't work. The chart becomes very small. Tested it and inspecting element show, `chartContainer` is of correct size, `summary-chart` is of correct size `highchairs-container` is of correct size, but there is a `` which is small and of fixed size. — Rusty, Aug 30 '16 at 07:21

score 0 · Answer 2 · answered Nov 13 '17 at 04:53

0

Add this code in your css file

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

answered Nov 13 '17 at 04:53

Kondal

2,870
5
26
40

Highcharts width flow out of parent div

2 Answers2