Top Vue.js Chart Components

Choosing a chart component is not always an easy task.

Sometimes you need a special type of chart to make sense of the numbers you want to display. At the same time, you want the charts to be beautiful, customizable, responsive, easy to implement,.. 🤯

We have collected our favourite Vue.js chart components in this article. We will update this collection with new components, as usual! If you think an important and great component is missing, just shoot me an e-mail (

last updated: June 9, 2020


JSCharting is one of the dinosaurs in the field of Javascript Charts. They have almost 2 decades of experience with data visualizations! Their charting library is pretty extensive and versatile with over 150 types including Org charts and maps.

They offer an official wrapper component for Vue (and also React).

Check out their gallery showing off all chart types and a lot of examples for features like smart annotations and labels, different layouts, dynamic charts or interactivity.

JSCharting Vue Charts Official JSCharting wrapper for Vue
icon-eye-dark Created with Sketch. 6.555

Syncfusion Vue Charts

Syncfusion's charts are part of their extensive UI library. They offer 30+ interactive chart types from simple line charts to correlation charts or box plots.

The control is performance-optimized and even supports real-time charts and lazy loading. Other features are zooming and panning, tooltips, legends, annotations, and out of the box image or PDF export.

If you want to use Syncfusion's Vue Charts, check out their free community license for individuals and smaller companies.

Syncfusion Vue Charts Interactive Vue Charts & Graphs
icon-eye-dark Created with Sketch. 21.946

Vue Trend

Vue Trend is as simple as it gets – it's an animated spark line. Just that! It works great as kind of a background visualization to show your users a trend over time.

Vue Trend Spark Line Charts
icon-eye-dark Created with Sketch. 27.699


Highcharts is one of the most-used Javascript Charting Libraries. Giants like Microsoft, Facebook or IBM are using them, as they are versatile and can also be implemented very editor-friendly into any CMS. They have been around for more than 10 years (since 2009).

There's an official Vue wrapper for the library, making them even easier to use in your next project.

Highcharts Vue Official Highcharts wrapper for Vue.js
icon-eye-dark Created with Sketch. 26.675


ZingCharts is a JS charting library that offers an official Vue component wrapping all their functionality.

They offer 35+ chart types that you can customize easily. Features like zooming, scrolling, tooltips, crosshairs, multi-axis visualizations and polling for real-time data help you make your charts interactive.

If you want an impression of what can be done with their library, you can visit their demo gallery where you'll find some pretty advanced visualizations from heatmaps to chord charts. (We love this interactive chart about games! 😍)

If you need your charts to be extra sturdy across browsers, get this: They support back to IE6.

ZingChart Vue Interactive & Responsive Charts
icon-eye-dark Created with Sketch. 4.562

Vue ECharts

ECharts is an interactive charting library providing a lot of data visualization options – Vue ECharts is its Vue Adaptation. Besides bar and pie charts, you can also create more complex charts like Polar Plots, Maps or Radar Charts.

Vue Echarts ECharts Wrapper
icon-eye-dark Created with Sketch. 20.022

Frappe Charts

These charts are inspired by GitHub! You can f.ex. create the famous Month-Wise Heatmap with this component. All charts are SVGs and the library has zero dependencies.

Frappe Charts SVG Chart Component
icon-eye-dark Created with Sketch. 9.831


Chart.js aims to be a simple yet flexible charting library for designers & developers. This simple HTML5 Charting library got a Vue.js wrapper with vue-chartjs.

If you quickly need ready-to-use charts this is a nice choice for you! You can use (and mix-and-match) 8 different chart types with chart.js – all of them animated and customisable.

Vue Chart.js Vue Wrapper for Chart.js
icon-eye-dark Created with Sketch. 36.567

Vue Morris

Morris.js is a very simple API for drawing line, bar, area and donut charts. This is their Vue.js wrapper!

Vue Morris Wrapper for morris.js
icon-eye-dark Created with Sketch. 15.348

Vue Apexcharts

ApexCharts is an open-source charting library that helps you build interactive charts and visualizations. It has very interesting features like built-in Zooming and Panning, as well as an export function for your charts.

While it’s not exactly a lightweight library, the added loading time may pay off if you work with data-heavy visualizations. They offer an official Vue Component for their library!

Vue Apexcharts Vue.js component for ApexCharts​ – Interactive and Modern SVG Charts
icon-eye-dark Created with Sketch. 25.050

Similar Articles
Top Vue.js Slider & Carousel Components 2020
06.02.2020  •  in #UI Components
Needing to build sliders have caused me some of the most painful moments of my freelance career. I have probably seen every version of carousels that designers can think of. So, before you use a carousel: Have you checked ? 🙃 No, but seriously: If yo...
Best Vue.js Datatables
27.05.2020  •  in #UI Components
Datatables are a complex beast. If you ever built data-heavy business applications, you will probably know it's not easy to make them readable and clear. Discover some of the best datatable components for Vue.js that are flexible enough to adapt to your data and use case.