Create Interactive Charts in Vue.js with RoughViz

Unlock the Power of Sketch-Like Charts in Your Vue.js Applications

What Are Charts, Anyway?

Charts are visual representations of data that make it easier to understand and distinguish patterns. While most users are familiar with concise and formalized charts, some prefer a more hand-drawn or sketched look. That’s where roughViz comes in – a JavaScript library built on top of D3.js and Rough.js that helps create charts with a unique, sketched appearance.

Getting Started with roughViz and Vue.js

To follow along, you’ll need:

• Basic familiarity with Vue.js
• A local development environment for Node.js and npm
• A text editor like Visual Studio Code or Atom

First, install vue-cli and create a new Vue application. Once set up, run npm run serve to ensure everything is working correctly.

Introducing vue-roughviz

vue-roughviz is a Vue.js wrapper for roughViz.js, making it easy to integrate sketch-like charts into your Vue.js projects. To include vue-roughviz in your project, run the following command:

vue add vue-roughviz

Exploring vue-roughviz Components

vue-roughviz provides components for various chart styles, including:

• roughBar: roughViz bar-chart component
• roughBarH: roughViz horizontal bar-chart component
• roughDonut: roughViz donut chart component
• roughPie: roughViz pie chart
• roughLine: roughViz line chart component
• roughScatter: roughViz scattered chart component
• roughStackedBar: roughViz stacked bar chart component

Using vue-roughviz in Your Project

Open your project folder in your preferred text editor and replace the contents of src/App.vue with the following code:


import { roughBar } from 'vue-roughviz';
export default {
components: { roughBar }
}


Configuring vue-roughviz Props

The only required prop is data, which can be a string or an object containing labels and values keys. Other useful props include:

• title: chart title
• roughness: roughness level of chart
• stroke: color of the bar stroke
• stroke-width: size of bar stroke
• fill-weight: weight of inner path color
• fill-style: bar-fill style (dashed, solid, zigzag-line, cross-hatch, hachure, zigzag)

Loading Data from an External API

Let’s display the price history of bitcoin for the past 10 days using the Coingecko API. Replace src/App.vue with the code below:


async mounted() {
const response = await fetch('https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=10');
const data = await response.json();
const chartData = data.prices.map(([date, price]) => ({ label: date, value: price }));
this.chartData = chartData;
}


What’s Next?

This tutorial has shown you how to create a Vue app using vue-cli, display sketch-like charts using vue-roughviz, and load data from an external API. If you’re interested in learning more about roughViz or contributing to the project, visit the roughViz or vue-roughviz projects on GitHub.

Debugging Vue.js Applications with LogRocket

Debugging Vue.js applications can be challenging. LogRocket is a powerful tool that records everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and more. Try LogRocket today to modernize how you debug your Vue apps.