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 (armin@nifty.at).

Vue.js Google Charts

This component is a Vue.js Wrapper for the original Google Charts. We love that they are really sturdy (also working in older IE versions) and interactive. Browse through the Google Chart Gallery to see the wide variety of possible data visualizations.

With using the Vue.js component, you get the added bonus of reactive data binding.

Vue.js Google Charts Reactive Vue.js wrapper for the Google Charts library
icon-eye-dark Created with Sketch. 2.690

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 Simple, elegant spark lines for Vue.js
icon-eye-dark Created with Sketch. 11.581

Vue Bars

Vue Bars is inspired by Vue Trend (see above!). It's an animated bar chart. Similar to Vue Trend, it works great as accompanying visualization to your data (but does not feature a legend or a view of single data points).

Vue Bars Simple, elegant spark bars for Vue.js
icon-eye-dark Created with Sketch. 805

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 component for Vue.js
icon-eye-dark Created with Sketch. 6.546

x-chart

x-chart lets you create a draggable data visualization dashboard. It's based on Vue ECharts (see above!), but has a more lighthearted, modern look. We're looking forward to how this component evolves.

x-chart A draggable & resizable data visualization system
icon-eye-dark Created with Sketch. 2.198

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. 1.007

vue-chartjs

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-chartjs Vue.js Wrapper for Chart.js
icon-eye-dark Created with Sketch. 7.229

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 A Vue.js wrapper for morris.js
icon-eye-dark Created with Sketch. 6.338

Highcharts

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 almost 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 framework
icon-eye-dark Created with Sketch. 1.216

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. 1.397

Similar Articles
Best Vue.js Notification Components
24.09.2018  •  in #UI Components
I've collected some of my favourite, versatile (and mostly lightweight) Vue.js Notification, Alert & Toast Components in this article!
The best Vue.js Admin Dashboards
16.04.2018  •  in #UI Components
As admin dashboards usually rely heavily on JavaScript, it was just a matter of time until beautiful Dashboards & Templates built with Vue.js begin to emerge! In this post, you'll find a growing collection of  💰 premium and free Vue.js Admin Template...
Comments