@chartts/vue

Chartts for Vue. 40+ chart types, beautiful defaults, Tailwind ready.

Install

npm install @chartts/vue @chartts/core

Quick start

<script setup>
import { LineChart } from "@chartts/vue"
const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  series: [{ name: "Revenue", values: [4200, 5800, 7100, 6400, 8200, 9600] }]
}
</script>

<template>
  <LineChart :data="data" />
</template>

Available components

Every chart type has a dedicated component: LineChart, BarChart, AreaChart, PieChart, DonutChart, ScatterChart, CandlestickChart, RadarChart, HeatmapChart, TreemapChart, GaugeChart, WaterfallChart, FunnelChart, SankeyChart, and 25+ more.

All components accept the same data prop and all ChartOptions as props.

Theming

// Built-in presets
<LineChart data={data} theme="corporate" />
<LineChart data={data} theme="ocean" />

// Auto light/dark
<LineChart data={data} theme="auto" />

// Extra themes from @chartts/themes
import { neonTheme } from "@chartts/themes"
<LineChart data={data} theme={neonTheme} />

Why Chartts?

• Beautiful by default — zero config charts that look great
• Under 15kb gzipped — the entire core library
• Real SVG — CSS works. Devtools work. Screen readers work.
• Tailwind ready — style with classes you already know
• TypeScript-first — strict types, autocomplete everywhere

Part of Chartts

Beautiful charts. Tiny bundle. Every framework.

• Documentation
• GitHub
• All packages

License

MIT