Vue-speedometer: Vue component library for showing speedometer like gauge

Hi All,

vue-speedometer is a Vue component library for showing speedometer like gauge using d3.

You can see it in action here - https://palerdot.in/vue-speedometer
Here is a sandbox link to play around with - https://codesandbox.io/s/vue-template-5yuw8
source code - https://github.com/palerdot/vue-speedometer

As an aside, it shares its core with react-d3-speedometer which was recently rewritten from scratch by modularizing its core.

If you have a need for a similar component in your Vue apps please let me know on what you think. Feedbacks appreciated.

3 Likes

Hi looks really nice :slight_smile:

Hi. I am trying to add this in my project, but its not working. I’ve instaled through npm.

and in my code:
import VueSpeedometer from “vue-speedometer”

  <vue-speedometer

    :maxSegmentLabels="12"

    :segments="3"

    :value="470"

    :segmentColors='["tomato", "gold", "limegreen"]'

    needleColor="lightgreen"

  />

</div>

giving:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build
1 Like

I am receiving the same error. Can you please tell me how was it solved.

Please check FAQ section which has information on dealing with this issue. Basically you need to create a vue.config.js file with following contents. For more context please refer to the actual source of this solution - https://github.com/vuejs/vue-cli/issues/1875#issuecomment-408739414

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

You need to create a vue.config.js file with following contents. For more context please refer to the actual source of this solution - https://github.com/vuejs/vue-cli/issues/1875#issuecomment-408739414

Update:

customSegmentLabels feature/prop 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"
    />