Speedometer Gauge With Vue.js And D3.js

Description:

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,
},

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

Last Update: September 20, 2019

Install:

# Yarn
$ yarn add vue-speedometer

# NPM
$ npm install vue-speedometer --save

You Might Be Interested In:

Tags:

Add Comment