DEV Community

Cover image for Creating a Gauge Chart (Speedometer) in Vue.js Using Vue Speedometer Plugin
Navnit Rai
Navnit Rai

Posted on • Edited on

Creating a Gauge Chart (Speedometer) in Vue.js Using Vue Speedometer Plugin

⚡ Vue Advanced Speedometer — A Professional Gauge Chart for Vue 3

Gauge Types

Docs
Dashboards, monitoring systems, IoT panels, and analytics apps often need visual indicators like speedometers or gauge charts.

But most Vue gauge libraries are either:

  • Not customizable enough
  • Not TypeScript friendly
  • Not performant
  • Or visually outdated

So I built Vue Advanced Speedometer — a modern, customizable, TypeScript-first gauge component for Vue 3.

It renders with SVG, supports animations, and is designed for real-world dashboards.

Gradient Arcs

🚀 Vue Advanced Speedometer

A professional-grade gauge chart library for Vue 3.

✔ Vue 3 native
✔ TypeScript support
✔ Highly customizable
✔ Smooth animations
✔ Production ready

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

📦 Installation

Install using your preferred package manager.

npm install vue-advanced-speedometer
Enter fullscreen mode Exit fullscreen mode

⚙ Global Registration 

// main.ts
import { createApp } from 'vue'
import { VueSpeedometer } from 'vue-advanced-speedometer'
import 'vue-advanced-speedometer/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.component('VueSpeedometer', VueSpeedometer)

app.mount('#app')
Enter fullscreen mode Exit fullscreen mode

📌 Basic Usage

The simplest example requires only value and max.

<VueSpeedometer :value="65" :max="100" />
Enter fullscreen mode Exit fullscreen mode

This instantly renders a responsive animated gauge.

Perfect for:

  • CPU usage
  • Performance scores
  • KPIs
  • Health indicators

Alerts & Thresholds

🎨 Customization Example

You can easily customize the theme, animation, and gauge type.

<VueSpeedometer
  :value="120"
  :max="180"
  type="full"
  theme="dark"
  :animationDuration="1000"
/>
Enter fullscreen mode Exit fullscreen mode

Options include:

  • semi gauge
  • full circle
  • quarter gauge

🧩 Custom Segments

Define colored ranges to show safe / warning / danger zones.

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

Perfect for:

  • Health metrics
  • Server load
  • Risk indicators

🌈 Gradient Gauges

You can also render smooth gradient arcs.

<VueSpeedometer
  :value="120"
  :max="180"
  :gradient="['#00ff88', '#ffaa00', '#ff3300']"
/>
Enter fullscreen mode Exit fullscreen mode

🚨 Alert Thresholds

Trigger visual alerts when values cross thresholds.

const alerts = [
  { value: 80, color: '#f59e0b' },
  { value: 140, color: '#ef4444' }
]
Enter fullscreen mode Exit fullscreen mode 
<VueSpeedometer
  :value="150"
  :max="180"
  :alerts="alerts"
/>
Enter fullscreen mode Exit fullscreen mode

Great for:

  • system monitoring
  • analytics dashboards
  • medical monitoring

🎯 Custom Center Slot

You can fully customize the center display using Vue slots.

<VueSpeedometer :value="85" :max="100">
  <template #center="{ value, percentage }">
    <div class="custom-center">
      <div>{{ value }}</div>
      <div>{{ percentage }}%</div>
    </div>
  </template>
</VueSpeedometer>
Enter fullscreen mode Exit fullscreen mode

✨ New in v2.0

Version 2.0 introduces several powerful new features.

Multi-Needle Support

Display multiple metrics in one gauge.

const needles = [
  { value: 60, color: '#3b82f6', label: 'AVG' },
  { value: 140, color: '#ef4444', label: 'MAX' }
]
Enter fullscreen mode Exit fullscreen mode 
<VueSpeedometer :max="200" :needles="needles" />
Enter fullscreen mode Exit fullscreen mode

Logarithmic Scale

Useful for wide-range data like metrics from 1 → 10000.

<VueSpeedometer
  :value="500"
  :min="1"
  :max="10000"
  :logarithmic="true"
/>
Enter fullscreen mode Exit fullscreen mode

Custom Tick Labels

Format ticks as currency, RPM, percentages, etc.

<VueSpeedometer
  :value="4500"
  :max="10000"
  :formatTick="(v) => '$' + v"
/>
Enter fullscreen mode Exit fullscreen mode

Concentric Arcs

Add additional metrics around the main gauge.

const arcs = [
  { radius: 80, color: '#3b82f6', value: 55, max: 100 },
  { radius: 70, color: '#22c55e', value: 40, max: 100 }
]
Enter fullscreen mode Exit fullscreen mode 
<VueSpeedometer
  :value="75"
  :max="100"
  :concentricArcs="arcs"
/>
Enter fullscreen mode Exit fullscreen mode

🎮 Events

The component emits useful lifecycle events.

Example:

@value-change
@segment-enter
@segment-leave
@animation-end
Enter fullscreen mode Exit fullscreen mode

This allows you to trigger logic like:

  • alerts
  • analytics
  • notifications

🛠 Exposed Methods

Control the gauge programmatically.

animateTo(value: number)
Enter fullscreen mode Exit fullscreen mode

Example:

speedometer.animateTo(75)
Enter fullscreen mode Exit fullscreen mode

You can also export the gauge.

exportAs('png')
exportAs('svg')
Enter fullscreen mode Exit fullscreen mode

🧠 Full TypeScript Support

The library exports typed interfaces:

interface Segment {
  from: number
  to: number
  color: string
}
Enter fullscreen mode Exit fullscreen mode 
interface NeedleConfig {
  value: number
  color?: string
  label?: string
}
Enter fullscreen mode Exit fullscreen mode

Perfect for TypeScript-first Vue apps.

📊 Ideal Use Cases

Vue Advanced Speedometer works great for:

  • Analytics dashboards
  • IoT monitoring panels
  • Medical systems
  • Finance dashboards
  • Admin panels
  • Real-time metrics

🔗 Links

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

NPM
https://www.npmjs.com/package/vue-advanced-speedometer-pro

❤️ Built for the Vue Community

Vue Advanced Speedometer is MIT licensed and open for contributions.

If you like it:

⭐ Star the repository
🐛 Report issues
🚀 Contribute improvements

Let’s build better Vue dashboards together.

Top comments (0)