Gauge Single Digit Visual Problem

Radzen Studio Angular
1

Hello, I have a problem with gauge component and you can see it clearly here:

Screenshot
Screenshot779×78 3.87 KB

When the value is single digit, the text positions to an annoying point. In chrome and firefox this is the issue.

Also, in another entry (here), you can see the same issue, even thought the main points are different.

Is there a quick way for me to fix this? Or maybe a quick and easy update from radzen's side?

Thank you,

2

Indeed the Gauge component that we use tries to be smart and scale the text. To disable that use the following CSS (add it to client\src\styles.css):

.gauge text {
  transform: scale(1);
}
3

Thanks for you answer.

I get the idea and scale of 2.5 looks like working for me. But I do not think the problem is the size of the text. It is the position. Keeping the current scale, if the position of the text is a little below we would not have the problem. Hence, I believe the position would be the focus of solution.

4

Now with the latest release the font size is fixed and disproportionate

5

I am using 2.47.2 and see no change.

6

We decided to fix the scaling as it doesn't seem to work correct in all cases. You can specify custom scaling via the aforementioned CSS rule.

1 Like