javascript - resize highchart on load -

i have event in chart object:

load: function(){     var text = this.renderer.label(percentage + '%').css({         color: 'white',         fontsize: fontsize + 'px',         fontfamily: "'raleway', sans-serif",         fontweight: 100     }).add();      var textbbox = text.getbbox();     this.chartheight = this.chartwidth;     this.redraw();      var x = ((this.renderer.width - textbbox.width) / 2) + 10;     var y = ((this.renderer.height - textbbox.height) / 2) - (fontsize / 5);     text.attr({x: x, y: y});  } 

what trying set chart's height same charts width. looks works item in chart put in correct spot chart defaults it's 400px height.

so when chart 200px wide, height should resize 200px high. happening is moving graph correct spot, chart still 400px high.

what missing fix this? set chart in css 100%, want same height percentage. can do?

here working fiddle: http://jsfiddle.net/epuqj6wy/

as can see chart 400px, should perfect square

you can use setsize method. example, chart.setsize(width, width);

http://api.highcharts.com/highcharts#chart.setsize