Question

106

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

rated 0 times [ 109] [ 3] / answers: 1 / hits: 24915 / 10 Years ago, fri, september 19, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseb

Add To Favorites

Follow

Total Points: 252

Total Questions: 96

Total Answers: 106

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

answered 10 Years ago jonrened · Accepted Answer

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)