Getting Started
Installation
How to install vccs and start building charts
How to install
pnpm add vccs
npm install vccs
yarn add vccs
bun add vccs
Use your first chart
Import chart components and compose them in your template:
App.vue
<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>
Make charts responsive
Wrap your chart in ResponsiveContainer so it adapts to its parent's size:
ResponsiveExample.vue
<template>
<div style="width: 100%; height: 300px">
<ResponsiveContainer>
<BarChart :data="data">
<!-- chart content -->
</BarChart>
</ResponsiveContainer>
</div>
</template>
Next steps
- Area Chart — Build your first area chart
- Bar Chart — Create bar charts with stacking and labels
- Line Chart — Render line charts with custom dots
- Scatter Chart — Plot data points on an X-Y plane
- Composed Chart — Mix Area, Bar, and Line in one chart