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,
},
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,
},
paddingHorizontal: {
  type: Number,
  required: true,
},
paddingVertical: {
  type: Number,
  required: true,
},
dimensionUnit: {
  type: String,
  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,
},

// custom segment labels
customSegmentLabels: {
  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,
},

// font sizes
labelFontSize: {
  type: String,
  required: true,
},
valueTextFontSize: {
  type: String,
  required: true,
},
valueTextFontWeight: {
  type: String,
  required: true,
},
svgAriaLabel: {
  type: String,
  required: true,
},
// ref: https://vuejs.org/guide/components/props.html
segmentValueFormatter: {
  type: Function,
  required: false,
},

Preview:

Speedometer Gauge With Vue.js And D3.js

Changelog:

v3.o.1 (02/29/2024)

  • Vue 3 support
  • Added more props

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
Tags:

Add Comment