Data Visualization

Data visualization is a crucial feature of computers in general. More often than not, we need to visualize data on the web in various forms. For example, we can use pie charts, bar charts, line charts, area charts, and many others. Developing charts ourselves is tedious though. They need to be accessible, easy to read, and automatically scalable, and they need to fit the continuous integration and continuous delivery or deployment (CI/CD) of the website.

Chart.js is a library that helps us integrate many different types of charts into our web applications. Chart.js supports these nine different types of charts:

• Area charts: These are used to create areas between two data sets.

• Bar charts: These display the classic bars of different lengths to compare quantities.

• Bubble charts: These are used to display three-dimensional data on an X/Y plane with an additional point size.

• Donut and pie charts: These are used to show parts of a whole in comparison.

• Line charts: These are used to show trend lines and the development of data over a second dimension, such as time.

• Polar area charts: These are similar to pie charts but are able to display one more dimension.

• Radar charts: Also known as spider charts, these look roughly like a spider's web.

• Scatter charts: These display simple points on X/Y coordinates.

• Mixed chart types: These show a combination of multiple chart types on the same chart.

Chart.js has been a defacto standard for charts on the web. There is also a Vue plugin for it.

Installing vue-chartjs

To install vue-chartjs, we need both the plugin and Chart.js itself. We can install it by executing npm i vue-chartjs chart.js. We can now import the components directly from `vue-chartjs`, as illustrated below. We also need to import some utilities from Chart.js and register them for the components to function correctly.