🔥
🔥
Get an extra10% OFFwith code "SAVE10TODAY"
0d:00h:00m:00s
Vue Charts
Creating beautiful and interactive charts in your Vue applications has never been easier. With the vue-chrts package (it's not a typo), you can build stunning, responsive charts with just a few lines of code.
npm Package Stats
Why Choose Vue charts
- Easy to Use: Vue charts is designed to be easy to use, even for beginners. You can create your first chart in minutes.
- Responsive: Vue charts is fully responsive and will look great on any device.
- Customizable: You can customize every aspect of Vue charts, from the colors to the tooltips.
- Wide Variety of Chart Types: We offer a wide variety of chart types, including line charts, bar charts, donut charts, and more.
Getting Started
To add Vue charts to your project, install the library via npm, pnpm or yarn:
pnpm add vue-chrts
npm install vue-chrts
yarn add vue-chrts
Then, import the chart component and use it in your Vue application:
<script lang="ts" setup>
import { AreaChart } from "vue-chrts";
interface AreaChartItem {
date: string
desktop: number
mobile: number
}
const categories: ComputedRef<Record<string, BulletLegendItemInterface>> =
computed(() => ({
desktop: {
name: 'Desktop',
color: '#3b82f6',
},
mobile: {
name: 'Mobile',
color: '#22c55e',
},
}))
const AreaChartData: AreaChartItem[] = [
{ date: '2024-04-01', desktop: 222, mobile: 150 },
{ date: '2024-04-02', desktop: 180, mobile: 97 },
{ date: '2024-04-03', desktop: 167, mobile: 120 },
{ date: '2024-04-04', desktop: 260, mobile: 240 },
{ date: '2024-04-05', desktop: 240, mobile: 290 },
]
const xFormatter = (tick: number): string => {
return `${AreaChartData[tick]?.date}`
}
</script>
<template>
<div id="app">
<AreaChart
:data="AreaChartData"
:height="300"
:categories="categories"
:y-grid-line="true"
:x-formatter="xFormatter"
:curve-type="CurveType.MonotoneX"
:legend-position="LegendPosition.Top"
:hide-legend="false"
/>
</div>
</template>
Examples
Vue charts (vue-chrts) can render any chart and are beautiful by design.
Vue charts are ideal for SaaS projects and finance dashboards, providing real-time data visualization, customizable chart types, and seamless integration with modern Vue workflows.
Bar Charts
Line Charts
Learn More
To learn more, check out our documentation.
Unlock All Premium Blocks
Get instant access to 100+ chart & blocks
Instant Access
No Subscription
Frequently Asked Questions
Everything you need to know about our templates