Feature: Custom segment labels

[Xambey]

I suggest extend segments array:

...
segments: [
    { label: 'Start', value: 0 },
    ...
    { label: 'End', value: 1000 }
]

add the ability to not just set segment values, but also add custom labels instead or along with displaying segment values

[Arun Kumar]

Please share more info and context regarding this issue. Please reopen if you have more info and context regarding this issue.

[Xambey]

@palerdot can you reopen this issue please?

[Arun Kumar]

@Xambey There is already an open issue regarding this in react-d3-speedometer - palerdot/react-d3-speedometer#33 with which this library shares the core code.

Also the way you are suggesting, there is an overlap between the number and text (for eg: 1000 and end), whereas the original linked issue suggests a different approach where text to be shown in between the segments.

In any case, I'm not sure how this can be accomodated. I will reopen this issue, but I'm marking it as wontfix till there is some clarity on how this feature has to be addressed.

[Arun Kumar]

This feature is released in v1.3.1. Live Example

Documentation - https://palerdot.in/vue-speedometer/?path=/story/vue-speedometer--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 
   <vue-speedometer 
      :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="#a7ff83"
      textColor="#d8dee9"
    />

Please upgrade to v1.3.1 to use this feature ...

[Mohammad Nour Itani]

is there a way to put labels on numbers not segments

[Arun Kumar]

is there a way to put labels on numbers not segments

Can you give more info on what you actualy mean? a screenshot would help.