Data visualization libraries for Vue.js in 2020
What is Vue
Vue.js is a front-end framework that goes side by side with such major frameworks as React and Angular when it comes to choosing the framework for building the client side for modern applications.
It’s best described as approachable and progressive since it offers incrementally adaptable pieces like a routing solution, a state management solution, a build toolchain, and the CLI.
The term ‘progressive framework’ was coined by its creator, and now it’s widely used when mentioning Vue.
Popularity of Vue
After being released and posted on Hacker News in 2014, its popularity literally skyrocketed.
On the graph in the State of JavaScript 2019 Survey, you can spot a positive dynamics of attitude towards Vue: the number of those who used it and would like to use it again has been increasing over the years.
Another important aspect I’d like to highlight is the open-source nature of Vue. Since its first release, it has been improving regularly. Its development is driven forward by a strong and active community and a dedicated team. And despite having a smaller community that React and Angular have, Vue.js is a solid choice for new projects.
Who is behind the framework
Facebook is behind React; Google is behind Angular. So, a natural question arises — who’s behind Vue.js?
Evan You is a central figure behind Vue. He was driven by the idea to build a framework with a minimal core, but the one that can work with complex apps.
A lot of introduced features were inspired by such complete frameworks as Ember and Angular.
But a new framework was meant to be similar to Angular in terms of runtime performance and syntax, but more lightweight, with a shorter learning curve, like better flexibility and modularity, clearer separation between directives and components, one-way data-binding, and other improvements and simplifications. Everything to allow developers to concentrate more on bringing ideas to production rather than stumble upon time-consuming configurations.
It also picks the most beneficial ideas of React, namely speed, the virtual DOM, reactive and composable view components, routing and global state management that are delegated to companion libraries. Speaking of data binding and components, Vue.js is closer to React than to any other frameworks. So, if you had previous experience with React, the process of transition to Vue should be smooth.
Yes, Vue incorporates a lot of features of popular frameworks, but it also offers plenty of features that make it unique:
- One-way data binding between components.
- Clearer separation between directives and components.
- Transparent dependency-tracking observation system with async queueing.
- Styling through the
styletags right in single-file components. - A CLI project generator.
- Own features for native development (NativeScript-Vue and Weex).
- Optional typing: you can decide whether to use TypeScript in your project or not.
Moreover, it’s flexible and more adaptable to a broad variety of projects.
Data visualization libraries
As the popularity of Vue is experiencing growth each year, the developers of front-end components try to keep up by offering wrappers for Vue.js. And data visualization tools are not an exception.
With the new 3.0 version release around the corner, I’ve decided to test a lot of data visualization tools to identify the cream of the crop — the ones you can seamlessly integrate into a Vue.js app. This resulted in composing a list of top libraries that hopefully be of value for all developers who have Vue.js as a part of a tech stack and need to add an analytical component to the project.
The list of data visualization libraries for Vue can also come in handy while choosing components for in-house embedded BI development.
Since data visualization needs always differ from project to project, I’ve decided to break the list down into the most popular general categories: charts, data tables, and pivot tables. My goal was to highlight the most prominent features of each library that falls into these categories.
I hope you’ll try them all and form your own judgment about each one.
Let’s start with an overview of data grids!
Bryntum Grid
Bryntum Grid belongs to the category of data grid components. It’s a part of the bigger UI components bundle for web projects.
From first glance, it strikes with the abundance of features, but I’ll outline the top ones.
The grid provides the basic functionality one may need for reporting:
- grouping data by columns
- filtering by values and dates
- sorting within a group
- expanding & collapsing
- displaying group summaries.
When it comes to customization, users can
- apply awesome themes
- style headers, resize row height using CSS or a cell renderer
- add tooltips to cells
- translate grid into languages
- define custom column types
- add options to the context menu.
The grid is pretty dynamic — you can add new rows dynamically at the top or the bottom via the UI, reorder rows with drag-and-drop, and edit cells right on the grid.
The overview is based on testing only the demos available on the website. Unfortunately, I couldn’t find a trial version to test. So it’s hard for me to make any conclusions about the grid’s performance.
Demo
Vue ag-grid
Ag-grid is a web component, originally designed as a data grid for displaying the data as it comes from the data source. From one of the last versions, it started to support a pivot mode as well.
Basic reporting features:
- column filtering
- row grouping
- aggregations
- Excel exporting
- interactiveness
- column pinning, which increases the readability of the report.
The tutorials cover in detail all the aspects of working with the grid as well as its customization capabilities.
Demo
While grids are excellent tools for displaying your data as it comes from the data source, there are multiple business cases when you need to present data in a summarized form. Here’s where pivot grids come in handy.
Flexmonster Pivot Table
Flexmonster Pivot is a web pivot table component that integrates with Vue.js.
It’s packaged with all the features a report designer needs:
- aggregation functions
- filtering, grouping
- conditional & number formatting
- calculated fields
- drill-through
- saving & exporting reports.
But the core feature is the pivoting interactivity. With quick and seamless drag-and-drop, you can put fields to the rows, columns, and measures and create a custom report. Anytime you can slice & dice data to view it in different ways.
Speaking about supported data sources, it’s worth mentioning the following ones: CSV, JSON, SQL & NoSQL databases, Elasticsearch, and OLAP cubes. And since the latest version, it’s possible to communicate with the component via the API and send the data you aggregate on the server side. This protocol makes it possible for working with huge data volumes at the expense of server-side calculations.
The component is fully customizable. You can:
- change the toolbar’s appearance and/or functionality
- apply report themes
- change fields layout
- translate the component into the needed language using a single localization file.
Plus, it comes with Pivot Charts to which you can switch from the grid mode.
Its Vue wrapper is delivered as an npm package. I enjoyed the process of integration — it appeared to be easy. You can register the pivot table as a local component or install it as a plugin. A plugin is accessible from anywhere in your app. When registering the module locally, it’s accessible only within a place it’s been defined (e.g., App.vue).
Demo
DevExtreme HTML5 JavaScript Pivot Grid 🔷
DevExtreme Pivot Grid is one more client-side pivot component you can add to the Vue app.
Basic features for reporting include:
- grouping & summarizing
- filtering & sorting
- row drag-and-drop.
Also, you can take advantage of such UI features as paging, scrolling, cell editing, foldering, which make reporting more neat and enjoyable.
The component can be customized. For example, with the ThemeBuilder UI or DevExtreme CLI, you can create custom themes.
The feature you may also like is the ability to bind the chart to the grid and display aggregated data in the chart.
I like the documentation — it’s logically arranged. Each demo contains versions for different frameworks, making it easy to try the code yourself.
Demo
Here’s the basic demo with Vue integration to explore.
And gradually we got to the charts!
ZingChart Vue
ZingChart is a JavaScript charting library that you can integrate with the Vue app.
First and foremost, I’d like to note the visual aesthetics of charts — it won’t leave you indifferent. They will match any project.
It’s worth diving into the gallery to find there all the variety of charts. Each chart type may have a lot of subtypes, which makes the entire collection huge.
But I’d like to draw your attention to several chart types which I classify as the most extraordinary ones:
- A tree chart is a real find. It allows for keeping data neat and accurate.
- A radar chart to show data in a radial pattern. You can use it for comparison.
- Rankflow.
- Venn Diagrams to show the relationship between several things.
- A nicely-looking chord chart.
While being tested with data, charts showed high performance. They were rendered smoothly despite having a lot of points plotted.
The support of custom modules may come in handy if you need to add custom functionality to charts.
Another great feature is that you can make a package with charts by yourself using the Build Generator. Simply select modules to include them in a single JavaScript file.
With plenty of API methods and events exposed, you can implement a lot of custom logic around the component.
Vue Apexcharts
Apexcharts is a JavaScript library with a set of charts needed for basic data visualization tasks.
The library is open-source, meaning you are free to contribute to its development.
I admire how developers approached Vue integration: with care about other developers in mind, they prepared an easy-to-use wrapper componentyou can install from npm. This simplifies integrating charts with the Vue.js ecosystem.
Regarding the visuals, there’re plenty of things you can enjoy:
- smooth animations
- making charts interactive with events.
Charts are equipped with all the vital features: tooltips, zooming, scrolling, legends. Besides, they are responsive — whether you are on desktop or mobile, charts look remarkably.
Try exploring the charts gallery to find the one you need.
AnyChart
And the last but not least — AnyChart. AnyChart consists of a family of charts.
Getting started with AnyChart in a Vue project is simple. With a wrapper, you can start working with Vue in minutes.
I encourage you to take a sneak peek into a rich gallery of chart samples. Whatever your data visualization goal is, you’ll find your perfect match. If you have financial data to visualize, try AnyStock. For geographical data, use AnyMap. For tracking KPIs and progress within an organization, try AnyGantt.
I like the way creators addressed the presentation of each chart’s purposes by showing the real-life use cases. Such an approach helps to understand how you can use charts with data from multiple industries.
Each chart can be themed with stylish skins. You can even export charts to share in social media by implementing a custom integration with social media platforms.
I believe you’ll be inspired by these charts as well as I am.
Suggest:
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch