Highcharts: Chart does not resize properly by making the screen smaller

Question

I am using HighCharts 4.0.4 and I have a chart with a custom legend in this way:

<div class="wrapper">
    <div class="element">
        <div id="chart"></div>
    </div>
    <div class="legend">
        Legend
    </div>
</div>

The CSS looks like this. The wrapper is a table, so that I can use in the legend with table-cell a vertical-align: middle. I want to have both 50% of the width of the wrapper.

.wrapper {
  display: table;
  width: 100%;
}

.element {
  display: table-cell;
  width: 50%;
}

.legend {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

#chart {
  width: 100%;
}

The problem is, I created a JSFiddle here, "running" the code if the output/result window is small, I see the 50%:50%. Resizing the output window and make it larger, everything is okay, the 50%:50% is okay, but making the output window smaller, the chart does not resize properly.

I saw some solutions with $(window).resize();. In my case, I tried to use the outerHeight, but the values only changes if I make the screen size bigger. So I found this solution which works:

$('#chart').highcharts().setSize(
  $(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);

But is there also a solution which does not need to use JavaScript, only HTML and CSS?

Answer 1

This should be done with just CSS... no resizing functions.

try adding position:absolute to your chart css property

The new css for #chart would look like this:

#chart {
    display: table-cell;
    position:absolute;
    width:50%;
}

I think this is the effect you want.

Check my Fiddle

note: I removed all resizing Javascript

---

Follow Up:

If you need to resize Highcharts on window resize with animation, you can do it with this syntax.

$(window).resize(function() {
    height = $(window).height()
    width = $(window).width() / 2
    $("#chart").highcharts().setSize(width, height, doAnimation = true);
});

I think this is more what you wanted using the Highchart setSize method with animation instead of CSS)

Fiddle

Answer 2

svg image prevents the table-cell to get smaller. Solution for this is:

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

See the example http://jsfiddle.net/FzXEM/9/

There are other ways to make the chart resize correctly like using float: left or position: absolute but then there are other problems and you can only use vertical-align in table or inline layouts.

Answer 3

Instaed of table cell, why you cannot use default divs with the float:left option?

.wrapper {
    float:left;
    width: 100%;
}
.element {
    float:left;
    width: 50%;
}
#chart {
    width: 100%;
}
.legend {
    width: 50%;
    float:left;
}

Example: http://jsfiddle.net/L9gubqvy/4/