Introduction

vccs is an unofficial Vue 3 port of Recharts. You build a chart from components, and each component owns one part of it.

What is vccs?

vccs brings the component-based charting of Recharts to Vue 3. Instead of one large options object, you compose a chart from components such as <AreaChart>, <Bar>, <Line> and <Tooltip>, and customize parts with slots.

Charts

What works the Vue way

• Models: v-model:active-index on Tooltip, Bar, Pie and the standalone charts (Sparkline, Tracker, Heatmap, CohortChart, CalendarHeatmap); v-model:range on Brush; v-model:hidden on Legend.
• Slots: custom shapes, dots, ticks, labels and tooltip content are named slots.
• Events: typed Vue events; item events receive (item, index, event).
• Typed rows: defineChartComponents<Row>() checks data-key and types tooltip payloads.
• Synchronized charts: charts with the same sync-id share the tooltip and the Brush range.
• Server rendering: charts render on the server and hydrate without layout jumps.
• Motion: enter, update and exit animations that follow prefers-reduced-motion.
• Accessibility: every chart has an accessible name, and item charts support the keyboard.

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
    :data="data"
    :height="300"
  >
    <CartesianGrid stroke-dasharray="3 3" />
    <XAxis data-key="name" />
    <YAxis />
    <Tooltip />
    <Area
      type="monotone"
      data-key="uv"
      stroke="#f97316"
      fill="#f97316"
    />
  </AreaChart>
</template>