vue-chartjs/docs

search

search
english

vue-chartjs

vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

Introduction

vue-chartjs let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.

It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.

Installation

If you are working with Vue.js 2+ simple run:

yarn add vue-chartjs -S

If you are using vue 1.x please use the legancy tag. However the vue 1 version is not maintained anymore.

yarn add vue-chartjs@legacy -S

Quick Start

You need to import the base chart and extend it. This gives much more flexibility when working with different data. You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.

You can import the whole package or each module individual.

// CommitChart.js
import { Bar } from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(data, options)
  }
})

You can pass the renderChart() method, two arguments:

• Data object
• Options object

Data object

The data object looks like this:

{
  labels: ['January', 'February'],
  datasets: [
    {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      data: [40, 20]
    }
  ]
}

For more information take a look at the Chart.js docs.

Props

There are some basic props defined in the BaseCharts. Because you extend() them, they are invisible, but you can overwrite them:

Prop	Description
width	chart width
height	chart height
id	id of the canvas

Examples

Here are some exmaples

Chart with props

You can create the data and options props to pass data to the chart.

// LineChart.js
import { Line } from 'vue-chartjs'

export default Line.extend({
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
})

After you add your component you can use it:

 <line-chart :data="{your data object}" :options="{your options}"></line-chart>

If you want to overwrite the width and height:

 <line-chart
  :data="{your data object}"
  :options="{responsive: false, maintainAspectRatio: false}"
  :width="400"
  :height="200"
  >
 </line-chart>

Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.

Chart with local data

import {Bar} from 'vue-chartjs'

export default Bar.extend({
  data () {
    return {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20]
          }
        ]
      }
    }
  }
  mounted () {
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
  }
})

Reusebale Components

If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.

Reactive Data

Chart.js does not provide a live update if you change the datasets. However vue-chartjs provides two mixins to achive this.

• reactiveProp
• reactiveData

Both mixins to actually the same. Most of the time you will use reactiveProp. It extends the logic of your chart component and automatically creates a prop names chartData and add a vue watch on this prop. On data change, it will either call update() if only the data inside the datasets has changed or renderChart() if new datasets were added.

reactiveData simply creates a local chartData variable which is not a prop! And add a watcher. This is only usefull, if you need single purpose charts and make an API call inside your chart component.

data () {
  return {
    chartData: null
  }
}

Example

LineChart.js

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default Line.extend({
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, this.options)
  }
})

RandomChart.vue

<template>
  <div class="small">
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
  import LineChart from './LineChart.js'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }, {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
  }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

Chart.js object

Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over this._chart

Available Charts

Bar Chart

The bar chart has an **optional** third parameter, which is the type. The default type is `bar` but you can pass `horizontalBar` if you want horizontal bars.

renderChart (data, options, type) {}

Line Chart

Doughnut

Pie

Radar

Polar Area

Bubble