[Solved]-Highcharts: Chart does not resize properly by making the screen smaller-Highcharts

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/

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.

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.

Something like this? For me, use perfect.

CSS:

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

.element {
  display: table-cell;
  width: auto;
}

#chart {
  width: 100%;
}

.legend {
  display: table-cell;
  width: 70px;
  vertical-align: middle;
}

JS:

$('#chart').highcharts({

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    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]
    }]

});

$(window).resize(function() {

        $('#chart').highcharts({

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    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]
    }]

});

});

http://jsfiddle.net/L9gubqvy/9/

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;

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/

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.