search

bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

gauge labels get cutoff #111

Closed nailbuster closed 7 years ago

nailbuster commented 7 years ago

really like this gauge..thanks...

my gauge labels seem to get cutoff within the canvas when i'm using - (negative) angle:

Don't know if there's a simple way to add a 'margin' or something around gauge so it can fit....

notice that the labels seem to get cutoff:

gaugetest

kplindegaard commented 7 years ago

Well, I introduced this bug. Sorry... Didn't notice it (see below where my labels are always in the corners of the canvas rectangle) until after the implementation, and now haven't had time to do anything about it. One option is to introduce a scaling factor for the gauge radius, but I haven't thought much about it. I will try to find some time to fix this. I may have to introduce a new config parameter, though.

BTW: Did you notice the other bug that came with the static labels?

image

jpost commented 7 years ago

I am seeing this issue reoccur for a slightly different gauge configuration. You can see I've set labels corresponding to the min and max at -6250 and 6250, and both labels are getting clipped.

image

kplindegaard commented 7 years ago

Yup. The labels exceed the height of the canvas in your case. You have three choices (at least): Reduce the label font size, make a new label style that allows you to also set label text alignment (e.g. left, right, center), or tweak the trigonometry the gauge can be translated up/down and to the side from the canvas center.

jpost commented 7 years ago

Thanks, I will try some of those ideas.

jpost commented 7 years ago

After some experimentation, I found that using 0.3 as the value for Gauge.prototype.paddingBottom (instead of the default of 0.1), the canvas was large enough at the bottom to accommodate significantly longer labels at the min and max of my gauge.