Adding text instead of number

[charan-r]

can we add text instead of number? Please check the attachment
Thankyou in advance

[palerdot]

Custom labels for values are not supported right now. Not sure if it will be supported any time soon enough. PRs are welcome.

[palerdot]

This feature is released in v0.10.0. Live Example

Documentation - https://palerdot.in/react-d3-speedometer/?path=/story/reactspeedometer--custom-segment-labels

There is a new prop customSegmentLabels which will take an array of object with following keys - text, fontSize, position (OUTSIDE/INSIDE), color.

// sample code 
   <ReactSpeedometer
      width={500}
      needleHeightRatio={0.7}
      value={777}
      currentValueText="Happiness Level"
      customSegmentLabels={[
        {
          text: "Very Bad",
          position: "INSIDE",
          color: "#555",
        },
        {
          text: "Bad",
          position: "INSIDE",
          color: "#555",
        },
        {
          text: "Ok",
          position: "INSIDE",
          color: "#555",
          fontSize: "19px",
        },
        {
          text: "Good",
          position: "INSIDE",
          color: "#555",
        },
        {
          text: "Very Good",
          position: "INSIDE",
          color: "#555",
        },
      ]}
      ringWidth={47}
      needleTransitionDuration={3333}
      needleTransition="easeElastic"
      needleColor={"#90f2ff"}
      textColor={"#d8dee9"}

Typescript Example

Please upgrade to v0.10.0 to use this feature ...