vue-smith-chartSmith Chart components for Vue 3

Plot impedance, VSWR, resistance circles, and reactance arcs as reactive SVG — no canvas, no dependencies.

Get Started

View on GitHub

🎯

Pure SVG

Every element is a native SVG shape. Scale to any size, style with CSS, and inspect with browser devtools.

⚡️

Reactive by default

All coordinates are computed properties. Change a prop and every dependent element updates instantly.

🧩

Composable

Drop SmPoint, SmResCircle, SmReactArc, and SmVswrCircle directly inside SmithChart as named slots.

📦

Tree-shakeable

Import only the components you need. Vue is a peer dependency — no duplicate runtime in your bundle.

Live demo

Drag the sliders to move the impedance point. The VSWR circle and constant-resistance circle update in real time.

Resistance (R) 1.20 Reactance (X) 0.80

Impedance: 1.20 +0.80j

Label rings Resistance labels Reactance labels

Install

bash

npm install vue-smith-chart

// Register globally
import VueSmithChart from 'vue-smith-chart'
app.use(VueSmithChart)

html

<!-- Use anywhere -->
<SmithChart>
  <SmPoint :res="1.2" :react="0.8" fill="#42b883" />
  <SmVswrCircle :res="1.2" :react="0.8" stroke="#42b883" />
</SmithChart>