Speedometer Gauge With Vue.js And D3.js

A Vue.js UI component to render a speedometer style, SVG-based gauge using d3.js library.

How to use it:

Import the Speedometer component.

import VueSpeedometer from "vue-speedometer"

Use the component with default options.

export default {
  components: { VueSpeedometer },
  template: `<vue-speedometer />`,
}

All possible props to config the gauge meter as per your needs.

// init value
value: {
  type: Number,
  required: true,
},

// min/max values
minValue: {
  type: Number,
  required: true,
},

maxValue: {
  type: Number,
  required: true,
},

// tracks if the component should update as the whole or just animate the value
// default will just animate the value after initialization/mounting
forceRender: {
  type: Boolean,
  required: true,
},

width: {
  type: Number,
  required: true,
},

height: {
  type: Number,
  required: true,
},

fluidWidth: {
  type: Boolean,
  required: true,
},

// segments to show in the speedometer
segments: {
  type: Number,
  required: true,
},

// maximum number of labels to be shown
maxSegmentLabels: {
  type: Number,
},

// custom segment points to create unequal segments
customSegmentStops: {
  type: Array,
},

// color strings
needleColor: {
  type: String,
  required: true,
},

startColor: {
  type: String,
  required: true,
},

endColor: {
  type: String,
  required: true,
},

// custom segment colors
segmentColors: {
  type: Array,
  required: true,
},

// needle transition type and duration
needleTransition: {
  type: String,
  required: true,
},

needleTransitionDuration: {
  type: Number,
  required: true,
},

needleHeightRatio: {
  type: Number,
  required: true,
},

ringWidth: {
  type: Number,
  required: true,
},

textColor: {
  type: String,
  required: true,
},

// d3 format identifier is generally a string; default "" (empty string)
valueFormat: {
  type: String,
  required: true,
},

// value text format
currentValueText: {
  type: String,
  required: true,
},

// placeholder style for current value
currentValuePlaceholderStyle: {
  type: String,
  required: true,
},

valueTextFontWeight: {
  type: String,
  required: true,
},

Preview:

Changelog:

v2.o.0 (07/01/2022)

• Update

v1.8.0 (11/28/2020)

• Bugfix: Always take new value for value prop. This fixes the bug when value will not go to 0.

v1.7.0 (10/05/2020)

• valueTextFontWeight config/prop

v1.6.0 (10/03/2020)

• bugfix

v1.5.0 (06/25/2020)

• removed @babel/runtime-corejs2 as dependency

Download Details:

Author: palerdot

Live Demo: https://palerdot.in/vue-speedometer/?path=/story/vue-speedometer--configuring-values

Download Link: https://github.com/palerdot/vue-speedometer/archive/master.zip

Official Website: https://github.com/palerdot/vue-speedometer

Install & Download:

# Yarn
$ yarn add vue-speedometer

# NPM
$ npm install vue-speedometer --save