Wrapped customSegmentLabels texts

[ThomasGil92]

Is there a way to wrap texts in array for "long" strings?

I found "custom-react-d3-speedometer" but not compatible with react 17

Thanks for your great module by the way

[palerdot]

Is there a way to wrap texts in array for "long" strings?

I don't see a reliable way to achieve this as the segment size can be very small and it could be very difficult to even display small length text.

You can try customSegmentLabels and control the position of the label (INSIDE/OUTSIDE). Something like

<ReactSpeedometer
        width={400}
        height={400}
        paddingHorizontal={50}
        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 and a long text",
            position: "OUTSIDE",
            color: "#555"
          }
        ]}
      />

Codesandbox reference: https://codesandbox.io/s/busy-hamilton-u9kmyc?file=/src/App.js

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

Also, I'm open to some better solution/PR for this issue.