CODEWITHSUNDEEP
javascriptcsshighcharts
Remi Sture
Remi Sture

Reputation: 12968

In a Highcharts pie chart, how to keep height in sync when window is resized?

When the window size shrinks, the width of the pie is updated, but the height of the whole canvas is not updated, which leads to much space above and below the pie. How can I make sure the graph doesn't take up more space than needed after resize?

Demo: http://jsfiddle.net/remisture/xV8PM/167/

Thanks

$(function() {
  $('#container').highcharts({
    title: null,
    marginLeft: 0,
    marginRight: 0,
    spacingLeft: 0,
    spacingRight: 0,
    chart: {
      type: 'pie'
    },

    plotOptions: {
      pie: {
        size: '100%',
        dataLabels: {
          enabled: false
        },
        states: {
          hover: {
            enabled: false
          }
        }
      }
    },

    series: [{
      data: [
        ['Firefox', 44.2],
        ['IE7', 26.6],
        ['IE6', 20],
        ['Chrome', 3.1],
        ['Other', 5.4]
      ]
    }]
  });
});
#container {
  outline: 1px solid red;
  padding: 0;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Upvotes: 2

Views: 1623

Answers (1)

David R
David R

Reputation: 15639

Place your container inside a wrapper <div>, set your container width to 100% and then you will have to redraw your chart whenever the window resize event occurs,

Here is a working DEMO: http://jsfiddle.net/xV8PM/172/

Hope this helps!

Upvotes: 2

Related Questions