How to remove "padding" around gauge

[Beau Shaw]

How would I go about removing the extra whitespace around the gauge?

I am trying to remove the space around the gauge so that the gauge (and min/max number) takes up the full width and height of the SVG.

Whitespace can be seen here:

You can see that the gauge is not centered vertically/horizontally. I have different use cases making the gauge bigger, which seems to alleviate some of the problem. Which can be seen below:

I have tried poking around with the Xo, Xi, Yo, Yi params to no avail. Is there some sort of width/height ratio that could solve this? Such as:

gaugeWidth - 100;
gaugeHeight = gaugeWidth * 0.6666667;

Ideally, I would like the gauge paths to start/end at the left/right/top/bottom most borders of the overall SVG.

Any help would be greatly appreciated and thanks for the hard work already!

[Tim de Koning]

The .svg layout is based on http://justgage.com/ . Padding is not configurable a.t.m. but you may achieve the desired effect by fiddling with the source at: (_getPathValues) . _getPathValues generates the anchor-points for the arc-path.

Cy is the bottom of the arc. When set to this.props.height, the arc should have no bottom padding.
Cx is x coordinate of the the center of the arc.
Ro is the outer radius of the arc. When the outer radius is set to the same value as Cx you should have no more padding on the left side.
etc...

This may give you some clues, but it may require a bit of puzzling to get this set up.

I'ld be happy to review a PR if you could get something working.!

[Beau Shaw]

Thanks for the pointers! I will look into this soon

[Hoang Doan]

Hi, have you found an optimal solution? I am currently using negative margin with the svg component.
Thanks.

[Beau Shaw]

@hodn Its been a long time since I have worked with this. I do still have the component in production though, but heavily modified. I actually copy/pasted most of this code and made lots of modifications to make it work for what I needed. But I don't remember exactly what I did to get the padding correct. I believe it was following the advice given above. Sorry I can't be more help.