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 to0
.
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