Vue ChartsBeautiful, responsive, and easy to use.
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.
Not using Nuxt? No problem you can install vue-chrts in any Vue project.
Page views
- Desktop
- Mobile
Why choose Vue charts
Charts that look right from the first render
# 1. install pnpm add vue-chrts # 2. render <AreaChart :data="data" :categories="categories" />
Easy to Use
Vue charts is designed to be easy to use, even for beginners. You can create your first chart in minutes.
Type-Safe by Default
Written in TypeScript. Chart props are generic over your data, so your editor autocompletes keys and flags typos before you run anything.
$93.8k
Color
Curve
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.
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.
- Desktop
- Mobile
Area Chart
Advanced Data Visualization
The vue-chrts package is a high-level charting library built on top of Unovis, offering a lightweight and high-performance solution specifically for the Vue ecosystem. It provides a wide range of visualization options that are both easy to implement and highly customizable via Tailwind CSS.
Whether you need Area Charts, Line Charts, or Bar Charts for standard metrics, or more complex visualizations like Bubble Charts for multi-dimensional data and Gantt Charts for project timelines, vue-chrts has you covered. It also supports specialized needs such as TopoJSON maps for geospatial data visualization, making it a versatile choice for any modern dashboard.
Powerful Customization
Tailor your visualizations to match your brand identity with deep customization options. Enhance user experience with interactive Tooltips, add data clarity using custom Markers, and provide clear context with flexible Legends. Every element is designed to be accessible and responsive out of the box.
Getting Started
Your first chart in two steps
To add Vue charts to your project, install the library via npm, pnpm or yarn (see the Vue Charts installation guide for more details):
pnpm add vue-chrtsThen, import the chart component and use it in your Vue application:
- Desktop
- Mobile
From the community
Nuxt and Vue developers build with Nuxt Charts
My favorite way to add charts to Nuxt. Clean, simple and beautiful.
Sébastien Chopin
@Atinux
If you need beautiful charts in your Vue or Nuxt app, Nuxt Charts is a no-brainer for me - it's my go-to library for all such use cases!
Michael Hoffmann
@Mokkapps
Nuxt Charts is the simple, beautiful, and customizable charting library the Nuxt/Vue ecosystem was desperately missing.
Hugo
@HugoRCD__
One of the best chart libraries for the Vue/Nuxt ecosystem. It's customizable, very modular, and its charts look good by default.
Fayaz Ahmed
@Fayazara
Nuxt Charts is just TOO easy to use and looks beautiful! We've incorporated it into our Nuxt UI course over at Vue School. Its just such an essential addition for any dashboard
Daniel Kelly
@danielkelly_io
I love your work! I use Nuxt for almost all my projects, and your charts are absolutely beautiful. You’ve actually inspired me to start building my own Nuxt module too!
Soraia
@SoraiaDev
Frequently Asked Questions
Everything you need to know about our templates