Highcharts: Chart does not resize properly by maki

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

You shouldn't use any JS code. If you want the charts to become responsive, here's the code:

http://jsfiddle.net/L9gubqvy/12/

Here's the CSS:

.wrapper {
    display: table;
    width: 100%;
    float:none;
    clear:both;
}
.wrapper:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.element {
    display: table-cell;
    width: 50%;
}
#chart {
    width: 100%;
}
.legend {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

PS: I'm having trouble posting the code using StackOverflow Code Snippet. I'll update the code later on.

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/

Answer 4

To be honest, I'm not quite sure why your chart was not resizing properly. But I have a way to do this without resizing in JS, assuming you can set the height of your wrapper div.

First of all, you really shouldn't style your elements as tables if you are not using tabular data; I removed this from your CSS. Secondly, if you want your legend centered, it really should be within a separate element that is alongside the chart; each should be wrapped in the same kind of div. Normally I'd call this a column, but since you're already using .element, that works too. These will each be floated to the left, with a width of 50%, and a height of 100% (this is important, because we can't center the legend vertically unless its parent has a height defined.

Then we have a child div inside the second .element, which is given the .legend class. Now we can more easily position it within that space. Since you don't know the height of the legend, you can't use a negative margin of 50%. Instead, you can use a CSS3 transform. It looks like this:

.legend {
  position: relative;
  top: 50%; /* relative to parent */
  -webkit-transform: translateY(50%); /* relative to the element itself */
  transform: translateY(50%);
}

JSFiddle here

This works well because the position is based on the parent element (or the closest ancestor with a defined position, but in this case, that would be the parent), and the transform is based on the element itself. So this will work regardless of the legend's height, your chart will resize properly, and you don't need to use JS to do it.

Answer 5

Here is a working Fiddle

The trick is to add two CSS properties:

• The wrapper element gets a position: relative;
• The chart div chart gets a position:absolute;

Answer 6

try to use this Fiddle

i am not sure how much it will help you, i have just used Highcharts some of the functionality.

Note: Resize the window of jsfiddle and run it will adjust according to the window i am not sure why it is behaving like this

Html

<div class="wrapper">
    <div class="element">
<div id="container" style="width:100%;margin: 0 auto"></div>
    </div>

Javascript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
        });
    });

CSS // i am not passing any css

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

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

Please refer this link where Highchart is responsive http://jsfiddle.net/2gtpA/show/