Circular gauge component for Vue.js with customizable colors, animations, and thresholds
npm install vue-circular-gaugeA highly customizable circular gauge component for Vue.js applications. Perfect for dashboards, progress indicators, and data visualizations.
- 🎨 Fully customizable colors with threshold support
- 🔄 Optional animations
- 📏 Multiple sizes (xs, sm, md, lg, xl, 2xl)
- 📊 Value display option
- 🔌 Idle mode with customizable icon
- 🚀 Lightweight (~5kb minified)
- 🧩 TypeScript support
- 📦 Vue 3 and Composition API support
``bashnpm
npm install vue-circular-gauge
Usage
$3
js
// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueCircularGauge from 'vue-circular-gauge'const app = createApp(App)
app.use(VueCircularGauge)
app.mount('#app')
`$3
vue
`Examples
$3
vue
`$3
vue
`$3
vue
:primary="{
0: '#ef4444', // red below 30
30: '#f97316', // orange between 30-60
60: '#22c55e', // green above 60
}"
/>
`$3
vue
`$3
vue
`$3
vue
`$3
vue
:idleMode="true"
idleIcon="M10,20 L20,10 L30,20 L40,10 L50,20"
idleIconColor="#3b82f6"
/>
`$3
vue
`$3
vue
size="lg"
:gapPercent="8"
:strokeWidth="12"
variant="ascending"
:showValue="true"
:showAnimation="true"
:primary="{
0: '#ef4444',
30: '#f97316',
60: '#22c55e',
}"
secondary="#e2e8f0"
/>
`Props
| Prop | Type | Default | Description |
| --------------- | ------------------------------------------------------------------- | ---------------- | ------------------------------------------ |
|
| number | 0 | Current value of the gauge (0-100) |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| number \| string | 'md' | Size of the gauge |
| gapPercent | number | 5 | Gap percentage of the gauge |
| strokeWidth | number | 10 | Width of the gauge's stroke |
| variant | 'ascending' \| 'descending' | 'ascending' | Direction of the gauge progress |
| showValue | boolean | false | Whether to show the value inside the gauge |
| showAnimation | boolean | false | Whether to animate the gauge on mount |
| primary | string \| Record | '#10b981' | Primary color or color thresholds |
| secondary | string \| Record | '#e5e7eb' | Secondary color or color thresholds |
| idleMode | boolean | false | Whether to show idle icon instead of value |
| idleIconColor | string | 'currentColor'` | Color of the idle icon |MIT