Creating stunning charts with Vue.js and Chart.js
Tags: vue, chartjs
Published: 2017-03-02 10:18:01

---
title: Creating stunning charts with Vue.js and Chart.js
published: true
description: Dive into the options of chart.js to create stunning charts.
cover_image: https://i.imgur.com/QqFCf8f.png
tags: vuejs, chartjs
---

Dive into the options of chart.js to create stunning charts.

Interactive charts can provide a cool way to visualize your data.
However most out of the box solutions are not as beautiful as they could be, with default options.

I will show you how to customize your chart.js options to make some cool charts!

# âš¡ Quick Start

What we will use:
- [Vue.js](https://vuejs.org/)
- [vue-chartjs](http://vue-chartjs.org)
- [vue-cli](https://github.com/vuejs/vue-cli)

We use `vue-cli` to create a basic structure. So I hope you got it installed already. And we use [vue-chartjs](http://vue-chartjs.org) as a wrapper for [chart.js](http://www.chartjs.org/).

```bash
vue init webpack awesome-charts
```

Then we go into our project folder and install our dependencies.

```bash
cd awesome-charts && yarn install
```

And we add vue-chartjs :

```bash
yarn add vue-chartjs -S
```

# Our first chart

So, let's create our first line chart.

```bash
touch src/components/LineChart.js && subl .
```

Now we need to import the Line BaseChart from [vue-chartjs](http://vue-chartjs.org) and create our component.

In the **mount()** function we need to call the **renderChart()** method with our data and options.

```javascript
import {Line} from 'vue-chartjs'

export default Line.extend({
  mounted () {

    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#FC2525',
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          backgroundColor: '#05CBE1',
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
})
```

We pass in a basic [chart.js](http://www.chartjs.org/) data object with some sample data and in the option parameter, we pass `responsive: true`. So the chart will grow based on our outer container.

â˜ We can call the method **renderChart()** because we extended the BaseChart, were this method and some props are defined.

## Mount & Test it

Now we delete the `Hello.vue` component from our `App.vue` and import our chart.

```html
<template>
  <div id="app">
    <div class="container">
      <div class="Chart__list">
        <div class="Chart">
          <h2>Linechart</h2>
          <line-example></line-example>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineExample from './components/LineChart.js'
export default {
  name: 'app',
  components: {
    LineExample
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  max-width: 800px;
  margin:  0 auto;
}
</style>
```

And after we run the dev script in our terminal, we should see our chart.

```
yarn run dev 
```

# ðŸ’„ Make me beautiful

Okay, now it is time for some beautification ðŸ’…. There are a few cool tricks in [chart.js](http://www.chartjs.org/). We can pass a color hex value to `backgroundColor`; But we can also pass a rgba() value. So we can make our color transparent. 
And as chart.js is using html canvas to draw, we can utilize [createLinearGradient()](https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/createLinearGradient).

This is where the fun starts. ðŸŽ¢ But to use it we need the canvas object. But this is not a big deal, as [vue-chartjs](http://vue-chartjs.org) holds a reference to it. We can access it over `this.$refs.canvas`

So in our `LineChart.js` we create two variables to store a gradient. Because we have to datasets.

Then we create two gradients:

```javascript
this.gradient = this.$refs.canvas
 .getContext('2d')
 .createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas
 .getContext('2d')
 .createLinearGradient(0, 0, 0, 450)
```

There is another cool function we can use: [addColorStop()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop)

We create three colorStops for each gradient. For 0%, 50% and 100%.

```javascript
this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
 
this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');
```

Now we can pass `this.gradient` to `backgroundColor`. And we have a very nice gradient. To get a nicer effect we also set the `borderColor` to the individual color with an alpha of 1. (or we use the hex value) And set the `borderWidth` to 1 and last but not least the `pointColor`.

```javascript
borderColor: '#FC2525', 
pointBackgroundColor: 'white', 
borderWidth: 1, 
pointBorderColor: 'white',
```

```javascript
import {Line} from 'vue-chartjs'

export default Line.extend({
  data () {
    return {
      gradient: null,
      gradient2: null
    }
  },
  mounted () {
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)

    this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
    this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
    this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
    
    this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
    this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
    this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');


    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          borderColor: '#FC2525',
          pointBackgroundColor: 'white',
          borderWidth: 1,
          pointBorderColor: 'white',
          backgroundColor: this.gradient,
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          borderColor: '#05CBE1',
          pointBackgroundColor: 'white',
          pointBorderColor: 'white',
          borderWidth: 1,
          backgroundColor: this.gradient2,
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
})
```

##  Presentation
Last step is to add some styling to the container in our `App.vue`

```css
.Chart {
  background: #212733;
  border-radius: 15px;
  box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);
  margin:  25px 0;
}

.Chart h2 {
  margin-top: 0;
  padding: 15px 0;
  color:  rgba(255, 0,0, 0.5);
  border-bottom: 1px solid #323d54;
}
```

# ðŸ‘ Final Result

![](https://i.imgur.com/QqFCf8f.png)