Work in Progress: This library is under active development. APIs may change.

Install

# pnpm
pnpm add vccs

# npm
npm install vccs

# yarn
yarn add vccs

Peer dependency: vue >= 3.0.0

Quick Start

<script setup>
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'vccs'

const data = [
  { name: 'Page A', uv: 4000, pv: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398 },
  { name: 'Page C', uv: 2000, pv: 9800 },
  { name: 'Page D', uv: 2780, pv: 3908 },
  { name: 'Page E', uv: 1890, pv: 4800 },
  { name: 'Page F', uv: 2390, pv: 3800 },
]
</script>

<template>
  <ResponsiveContainer
    width="100%"
    :height="300"
  >
    <BarChart :data="data">
      <CartesianGrid stroke-dasharray="3 3" />
      <XAxis data-key="name" />
      <YAxis />
      <Tooltip />
      <Bar
        data-key="pv"
        fill="#8884d8"
      />
      <Bar
        data-key="uv"
        fill="#82ca9d"
      />
    </BarChart>
  </ResponsiveContainer>
</template>

Chart Types

| Chart | Component | Description | |-------|-----------|-------------| | Area | <AreaChart> + <Area> | Filled area charts with stacking & gradients | | Bar | <BarChart> + <Bar> | Vertical/horizontal bar charts | | Line | <LineChart> + <Line> | Line charts with multiple curve types | | Scatter | <ScatterChart> + <Scatter> | X-Y scatter plots | | Composed | <ComposedChart> | Mix Area, Bar, Line in one chart | | Pie | <PieChart> + <Pie> | Pie and donut charts | | Radar | <RadarChart> + <Radar> | Radar/spider charts | | Radial Bar | <RadialBarChart> + <RadialBar> | Circular bar charts | | Funnel | <FunnelChart> + <Funnel> | Funnel/pipeline charts | | Treemap | <Treemap> | Not yet supported | | Sankey | <Sankey> | Not yet supported | | Sunburst | <SunburstChart> | Not yet supported |

Components

Cartesian: XAxis, YAxis, ZAxis, CartesianGrid, ReferenceLine, ReferenceArea, ErrorBar, Brush

Polar: PolarGrid, PolarAngleAxis, PolarRadiusAxis

General: Tooltip, Legend, Label, LabelList, Cell, ResponsiveContainer

Shapes: Rectangle, Dot, Sector, Symbols

Features

• Vue 3 Native — Composition API + JSX, full TypeScript support
• Recharts API — Same intuitive composable component design
• Animated — Smooth transitions powered by Motion for Vue
• Interactive — Tooltip, legend, brush, and click/hover events
• Responsive — <ResponsiveContainer> adapts to parent width
• Customizable — Named slots for shapes, ticks, tooltip content, legend, and more

Architecture

• State: Redux Toolkit via @reduxjs/vue-redux — one store per chart
• Math: D3 scales and shapes via victory-vendor
• Animation: Motion for Vue

Project Structure

packages/vue/src/     # Library source (published as vccs)
playground/nuxt/      # Nuxt 3 playground for manual testing
docs/                 # Documentation site (Nuxt 3 + Docus)

Development

pnpm install          # Install dependencies
pnpm dev              # Watch mode (library)
pnpm test             # Run tests
pnpm test:coverage    # Tests with coverage
pnpm storybook        # Storybook
pnpm play             # Nuxt playground
pnpm docs             # Documentation site

License

MIT

Credits

• Recharts — Original React charting library this project ports from
• Victory Vendor — D3 math utilities
• Motion for Vue — Animation engine
• Redux Toolkit — State management
• VueUse — Vue composition utilities