vue-svg-gauge
Advanced tools
Customizable gauge component with gradients and animations for VueJs
An easily customizable gauge for VueJS with gradients and animations
You can find a demo here
npm i vue-svg-gauge --save
yarn add -D vue-svg-gauge
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
import Vue from 'vue'
import { VueSvgGauge } from 'vue-svg-gauge'
new Vue({
components: {
VueSvgGauge,
}
})
import Vue from 'vue'
import App from './App.vue'
import VueSvgGauge from 'vue-svg-gauge'
Vue.use(VueSvgGauge)
new Vue({
render: h => h(App),
}).$mount('#app')
Add a script tag pointing to dist/vue-svg-gauge.min.js after adding Vue.
<html>
<head>
...
</head>
<body>
<div id="app">
<vue-svg-gauge></vue-svg-gauge>
</div>
<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-svg-gauge.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
Once installed, it can be user in any template as
<VueSvgGauge
:start-angle="-110"
:end-angle="110"
:value="3"
:separator-step="1"
:min="0"
:max="4"
:gauge-color="[{ offset: 0, color: '#347AB0'}, { offset: 100, color: '#8CDFAD'}]"
:scale-interval="0.1"
/>
<!-- or -->
<vue-svg-gauge
:start-angle="-110"
:end-angle="110"
:value="3"
:separator-step="0"
:min="0"
:max="10"
gauge-color="#8CDFAD"
:scale-interval="0.1"
/>
| Props | Type | Value | Default |
|---|---|---|---|
| value | Number | Value of the gauge, must be contained between min and max. If not, it will be set to min if inferior, or max if superior | 70 |
| min | Number | Minimum value reachable | 0 |
| max | Number | Maximum value reachable | 100 |
| startAngle | Number | Start angle of the gauge. Can go from -360° to 360° but must be smaller than endAngle | -90 |
| endAngle | Number | End angle of the gauge. Can go from -360° to 360° but must be greater than startAngle | 90 |
| innerRadius | Number | inner radius that will determine the thickness of the gauge | 60 |
| separatorStep | Number | Number of steps between each separator (will display a separator each min + (n * separatorStep)). Won't display any if 0 or null | 10 |
| separatorThickness | Number | Thickness of the separators, unit is in degree | 4 |
| gaugeColor | String,Array | Color of the gauge, can either be a simple color or a gradient | [{ offset: 0, color: '#347AB0' }, { offset: 100, color: '#8CDFAD' }] |
| baseColor | String | Color of the empty gauge | #DDDDDD |
| scaleInterval | Number | Interval between the scale line, based on min and max. Won't display any if 0 or null | 5 |
| transitionDuration | Number | Transition duration time in ms. If set to 0, there will be no transition | 1500 |
| easing | String | Animation easing option | Circular.Out |
Notes :
There is a main slot allowing you to display any kind of html you want in your gauge.
<VueSvgGauge
:start-angle="-110"
:end-angle="110"
:value="random"
:separator-step="20"
:scale-interval="10"
:inner-radius="80"
>
<div class="inner-text">
<span>Let's make this <b>fun</b> !</span>
</div>
</VueSvgGauge>
.inner-text {
// allow the text to take all the available space in the svg on top of the gauge
height: 100%;
width: 100%;
span {
max-width: 100px;
color: red;
// ...
}
}
You will need to install vue ~2.5.22 to use this package properly
Also vue-svg-gauge relies on the tweenJs library for animations.
Made with ❤️ at comet
FAQs
Customizable gauge component with gradients and animations for VueJs
We found that vue-svg-gauge demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.