vue-advanced-speedometer-pro

Vue Advanced Speedometer ⚡

A high-quality Vue 3 speedometer / gauge chart component built with SVG.
Smooth animations, customizable themes, and flexible API make it ideal for dashboards, admin panels, IoT monitors, and analytics apps.

GitHub Repository:
https://github.com/Navnit73/vue-speedometer-gauge-chart

Docs:
https://vue-speedometer-gauge-chart.vercel.app/docs

✨ Features

• 3 Gauge Types — full circle, semi circle, quarter gauge
• 5 Built-in Themes — light, dark, material, minimal, neon
• Gradient arcs with multiple color stops
• Custom colored segments (safe / warning / danger zones)
• Smooth 60 FPS animations using requestAnimationFrame
• Custom center slot for HTML or Vue components
• Alert thresholds with pulse effect
• Export as PNG, SVG, or PDF
• Developer API methods
• Responsive with ResizeObserver
• Tree-shakable imports
• Full TypeScript support

📦 Installation

npm install vue-advanced-speedometer

🚀 Quick Start

Global Registration

import { createApp } from 'vue'
import VueAdvancedSpeedometer from 'vue-advanced-speedometer'
import 'vue-advanced-speedometer/dist/style.css'

const app = createApp(App)

app.use(VueAdvancedSpeedometer)

app.mount('#app')

Local Import

<script setup>
import { VueSpeedometer } from 'vue-advanced-speedometer'
import 'vue-advanced-speedometer/dist/style.css'
</script>

<template>
  <VueSpeedometer :value="75" :max="180" />
</template>

📖 Props API

Types

interface Segment {
  from: number
  to: number
  color: string
}

interface AlertThreshold {
  value: number
  color: string
}

Events

Slots

Exposed Methods

Access using template ref.

<script setup>
import { ref } from 'vue'
import { VueSpeedometer } from 'vue-advanced-speedometer'

const gaugeRef = ref()

gaugeRef.value.setValue(50)
gaugeRef.value.animateTo(80, 1200)
gaugeRef.value.reset()
gaugeRef.value.exportAs('png')
</script>

<template>
  <VueSpeedometer ref="gaugeRef" :value="50" />
</template>

Supported export formats

png
svg
pdf

🎨 Examples

Gauge Types

<VueSpeedometer :value="75" type="semi" />
<VueSpeedometer :value="75" type="full" />
<VueSpeedometer :value="75" type="quarter" />

Themes

<VueSpeedometer :value="75" theme="dark" />
<VueSpeedometer :value="75" theme="neon" />
<VueSpeedometer :value="75" theme="material" />

Gradient Arc

<VueSpeedometer
  :value="75"
  :gradient="['#00ff88','#ffee00','#ff3300']"
/>

Custom Segments

<VueSpeedometer
  :value="75"
  :max="180"
  :segments="[
    { from: 0, to: 60, color: '#22c55e' },
    { from: 60, to: 120, color: '#eab308' },
    { from: 120, to: 180, color: '#ef4444' }
  ]"
/>

🏗 Development

Install dependencies

npm install

Start development server

npm run dev

Build library

npm run build

❤️ Support & Sponsorship

If you sponsor then I feel happy 😊

📄 License

This project is free and open-source under the MIT License.

See LICENSE.md for full details.