Charts for Vue

Devmnj • Sun Jun 20 2021

0 min read

When it come to chart I should mention Morris chart which I start developing my very first Python Flask app. It offer pretty nice charts. But for Vue I recommend you to use Chartjs.

Vue-Chartjs

Chartjs has Vue wrapper variant (opensource) which is based on Original Chartjs. It is JavaScript library you can use either CDN or NPM version. I going to use it with NPM, it is so easy.

Source code

npm install vue-chartjs chart.js --save

Example

Here is a simple TypeScript example ( provided by the official GitHub repository)

Source code

// CommitChart.ts
import { Component, Mixins } from 'vue-property-decorator'
import { Bar, mixins } from 'vue-chartjs';
import { Component } from 'vue-property-decorator';

@Component({
    extends: Bar, // this is important to add the functionality to your component
    mixins: \[mixins.reactiveProp\]
})
export default class CommitChart extends Mixins(mixins.reactiveProp, Bar) {
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: \['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'\],
      datasets: \[
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: \[40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11\]
        }
      \]
    })
  }
}

What Next ?

lol, create custom component for charting , so that you can use them in other projects.

One of the key point to remember that the chart component class doesn't have a CSS and Template section. According to documentation it can't have template section. So you have to use another component using the above component.