React Speedometer percentage value formatting shows too many decimals-CodePudding

I am using react-d3-speedometer to display speedometers on my React web application but I am running into a problem.

I want to use percentages as values for one of the speedometers but all the number in the svg have about 8 decimals by default. It looks like this:

The code I use for this speedometer is as follows:

<ReactSpeedometer
                        maxValue={1}
                        value={0.5924}
                        valueFormat="%"
                        width={250}
                        height={150}
                      />

I assume that this should not be the default behaviour and that I perhaps set a value wrongly, but I cannot find anyone else with this issue on this website or the developers. I hope one of you lovely Stack Overflow people can come to the rescue. Thanks in advance to anyone that answers!

CodePudding user response：

Taken from here: https://github.com/d3/d3-format#locale_format : If the precision is not specified, it defaults to 6 for all types except (none), which defaults to 12.

So you should try it with .2% in the valueFormat to get 2 digits after the dot.

<ReactSpeedometer
                        maxValue={1}
                        value={0.5924}
                        valueFormat=".2%"
                        width={250}
                        height={150}
                      />