How to set plot area width and height in Highcharts?

Question

I\'m plotting a map made by a series of points in HighCharts. I want that map to be properly scaled and be a perfect square.

Thus, i\'ve set the chart height and wid

Answer 1

You might want to use marginLeft, marginRight, marginTop and marginBottom properties.

The margin options (marginLeft, marginTop etc) give the margin to the actual plot area and does not apply to other elements on the chart (labels, legend etc)

See example in Hightscharts Docs: https://www.highcharts.com/docs/chart-design-and-style/design-and-style

Answer 2

In your chart default values of spacing are used and the biggest is a bottom spacing with value of 15 while others are of value 10 each. When setting all spacing to 15 you will get a square (196 x 196 px).

Example: http://jsfiddle.net/5825mzLs/

Answer 3

You can extend Highcharts with new function. Here you can find information about extending Highcharts: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

As you will see in my demo, I wrapped setChartSize function and give them possibility to use parameters from your chart options:

chart: {
  plotAreaWidth: 300,
  plotAreaHeight: 200
},

Function is also positioning your plot area in the middle of chart container.

example: http://jsfiddle.net/izothep/eph5secj/2/