Custom formatting of values

[mohammadnouritani]

can we change the needle SVG is it possible to do that

also can we custom the label of the numbers

can we show the numbers with the custom label for segments

[palerdot]

can we change the needle SVG is it possible to do that

This is not possible right now.

also can we custom the label of the numbers

This should be possible with valueFormat prop.

can we show the numbers with the custom label for segments

Please share a screenshot or more info on this since I could not understand what you mean by this

[mohammadnouritani]

I want to change the 1400 and the 1700 to say " min 1400" , "max 1700"

in this image I am using the custom segments labels

you can see that the numbers are gone

can I show both the number and the segment labels

[palerdot]

can I show both the number and the segment labels

No. It is not possible right now.

PRs are welcome

[palerdot]

I think this could be achieved by passing a formatValue function prop (which is not available now) which allows the user to customise how the values are formatted ... something like

<ReactSpeedometer 
   formatValue={value => {
      if (value === "1400") { return "min $1400" }
   }}
/>

In any case, right now this feature is not available. I will see if this can be achieved in future releases.

[palerdot]

@mohammadnouritani I'm reopening this issue so that issue can be worked on in future. Thank you for raising this issue.

[mohammadnouritani]

I think this could be achieved by passing a formatValue function prop (which is not available now) which allows the user to customise how the values are formatted ... something like

<ReactSpeedometer 
   formatValue={value => {
      if (value === "1400") { return "min $1400" }
   }}
/>

In any case, right now this feature is not available. I will see if this can be achieved in future releases.

This will change the value in the label bellow I want to change the numbers with value formate array for each segment divider

[palerdot]

This will change the value in the label bellow I want to change the numbers with value formate array for each segment divider

can you elaborate more with an example?

[nilesh1762]

I want to show % with vale. How can I do with gradient color.

[palerdot]

I want to show % with vale. How can I do with gradient color.

can you elaborate more with an example?

[nilesh1762]

I want to show % with vale. How can I do with gradient color.

can you elaborate more with an example?

I mean I want to show value which is connect with spedometer graph with % sign. I have attach snap.You will see every value there is % sign is attached.But I have to do this with css gradient.

[nilesh1762]

I want to show % with vale. How can I do with gradient color.

can you elaborate more with an example?

I mean I want to show value which is connect with spedometer graph with % sign. I have attach snap.You will see every value there is % sign is attached.But I have to do this with css gradient.

I have make same as given snap with gradient effect,

[palerdot]

You can use customSegmentLabels for having more control over colors and display text - https://palerdot.in/react-d3-speedometer/?path=/story/reactspeedometer--custom-segment-labels. In this case, you have to calculate the values for display so that you can use appropriate formatting.

Example sandbox - https://codesandbox.io/s/condescending-lewin-v2vty?file=/src/App.js

[muhammadnaved]

@palerdot How can I add the Target needle which is shown in the below snapshot? Do we have any prop? Could you please help I am new to React?

[palerdot]

Custom formatting of values is now available valueFormatter prop - https://github.com/palerdot/react-d3-speedometer/issues/152

Closing this issue.

[palerdot]

@mohammadnouritani This option/prop is not available and also not planned.

For future updates use this issue - https://github.com/palerdot/react-d3-speedometer/issues/163

@palerdot How can I add the Target needle which is shown in the below snapshot? Do we have any prop? Could you please help I am new to React?