2

This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.

size API entry for Pie Chart size API entry for Pie Chart

Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?

MandM
  • 3,293
  • 4
  • 34
  • 56

2 Answers2

9

By setting the spacing to zero, you can fill the entire space:

http://jsfiddle.net/mkremer90/3sngK/1/

Fiddle with the spacing parameters to change how much the chart fills. As for a percentage based like size option I can't find one either.

MatthewKremer
  • 1,549
  • 1
  • 14
  • 25
  • Ah, I noticed the spacing parameters before I posted and I had tested the `spacingLeft` parameter by setting it to zero, but I didn't set all of them to zero (I had a container that was much wider than it was tall, and I thought the spacingLeft would move it to the left of the container, but it stayed in the middle). Either way, I'll go ahead and implement this - thanks for the answer! – MandM Mar 12 '13 at 12:58
  • By the way you can also set margin to a negative number if its not going all the way to the edge of the container. – MatthewKremer Mar 12 '13 at 13:05
  • I also hadn't noticed the `margin` parameter! I guess I was trained on the 's' area looking for the _size_ parameter so I only saw spacing - thanks for the good info! – MandM Mar 12 '13 at 13:13
  • Lol, yeah sometimes docs can be just big enough to not see everything. Heck, I've found things in the HighCharts source code that aren't even in the docs. – MatthewKremer Mar 12 '13 at 13:15
0

I know this is old, but if like me, you have borderWidth set to something greater than 0, you'll find yourself with the tag being positioned (e.g. x="5.5" y="5.5") off from the corner and width and height shrunk. Setting spacing and margin options won't help in this case.

The simple solution then is to avoid setting borderWidth to anything at all; just leave it default or set it to zero. Instead, set the border on the container element you're calling highcharts on.

Alternatively, you could set negative margins and increase size on the container element to compensate for position shift and size shrink on the graph. Might need to wrap the container in a div with style="overflow: hidden;".

Brad T.
  • 252
  • 4
  • 17