Unable to pass custom points react gauge speedometer

Question

I am utilizing the npm package react-d3-speedometer for creating a custom points based gauge. As per the stories provided in the package, if the values 0 to 1000 are being passed to the property customSegmentValues, it works properly. But I need to render value range from 0.5 to 1.5, and it does not work.

Here is the code sandbox for the same:

https://codesandbox.io/s/suspicious-maxwell-ofw1k

All I get the error: First value should be equivalent to min value given. Current min value - 0.

If not using the customSegment property and directly passing the min={0.5}, max={1.5} works though but since I need to pass custom colors for the segments, I need to utilize this custom property. Any help to resolve this appreciated. Thanks in Advance.

Answer 1

You need to use the correct props i.e. minValue and maxValue. (not min max)

Working demo

Code snippet

   <ReactSpeedometer
        forceRender={true}
        needleHeightRatio={0.9}
        needleColor={"black"}
        needleTransition={"easeCircleInOut"}
        maxSegmentLabels={12}
        segments={12}
        customSegmentStops={[
          0.5,
          1,
          0.6,
          0.7,
          0.8,
          0.9,
          1.0,
          1.1,
          1.2,
          1.3,
          1.4,
          1.5
        ]}
        minValue={0.5}//<---here
        maxValue={1.5}//<---here
        segmentColors={[
          "Lime",
          "LawnGreen",
          "GreenYellow",
          "DodgerBlue",
          "DeepSkyBlue",
          "SkyBlue",
          "DarkOrange",
          "Orange",
          "OrangeRed",
          "Red",
          "blue",
          "Red"
        ]}
        value={1.2}
      />