Introduction

vccs (Vue Charts Components) is an unofficial Vue 3 port of Recharts. It provides composable charting components built with Vue 3 Composition API + JSX/TSX.

What is vccs?

vccs brings the declarative, component-based charting experience of Recharts to Vue 3. Instead of configuring charts with complex option objects, you compose them with intuitive components like <AreaChart>, <Bar>, <Line>, and <Tooltip>.

What you can do

• Build charts declaratively — Compose Area, Bar, Line, Scatter, Composed, Pie, Radar, and RadialBar charts with Vue components
• Customize everything — Override shapes, labels, tooltips, and legends via named slots
• Animate smoothly — Built-in transitions powered by Motion for Vue
• Synchronize charts — Link tooltip and hover state across multiple charts with syncId
• Respond to events — Handle click, hover, and brush interactions

When to use vccs

Use vccs when you need to:

• Add data visualization to a Vue 3 application
• Migrate existing Recharts code from React to Vue
• Build interactive, animated charts with a composable API
• Customize chart appearance beyond what config-driven libraries offer

Quick example

<script setup>
import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'vccs'

const data = [
  { name: 'Jan', uv: 4000 },
  { name: 'Feb', uv: 3000 },
  { name: 'Mar', uv: 2000 },
  { name: 'Apr', uv: 2780 },
  { name: 'May', uv: 1890 },
  { name: 'Jun', uv: 2390 },
]
</script>

<template>
  <AreaChart
    :width="500"
    :height="300"
    :data="data"
  >
    <CartesianGrid stroke-dasharray="3 3" />
    <XAxis data-key="name" />
    <YAxis />
    <Tooltip />
    <Area
      type="monotone"
      data-key="uv"
      stroke="#8884d8"
      fill="#8884d8"
    />
  </AreaChart>
</template>