0
293
ViewsReact Speedometer percentage value formatting shows too many decimals
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!
1 answers
Answer question0
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}
/>
Edit: For using different digits i'd go with this
function Speedometer() {
const value = 0.8;
return (
<ReactSpeedometer
maxValue={1}
value={value}
valueFormat=".0%"
width={250}
height={150}
currentValueText={`${value * 100}%`}
/>
);
}