Create doughnut chart component in Vuejs


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Install dependencies

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.


 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file Doughnut.js

import { Doughnut, mixins } from 'vue-chartjs'

export default {
  extends: Doughnut,  
  mixins: [mixins.reactiveProp],
  name: 'DoughnutChart',
  props: [{
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

Using the component

In the page component we can import component and bind the data, and options.

<template>
  <div class="flex-container">
    <DoughnutChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import DoughnutChart from '@/components/Doughnut'
export default {
  name: "Doughnut",
  components: { DoughnutChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-route post may interest you

Create line chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create a Line Chart component

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file LineChart.js

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,  
  mixins: [mixins.reactiveProp],
  name: 'LineChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Line chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options.

<template>
  <div class="flex-container">
    <LineChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import  LineChart   from "@/components/LineChart"
export default {
  name: "LineChart",
  components: { LineChart
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>

.flex-container {
  display: flex;
}
</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-route post may interest you

redirecting multiple routes in Vuejs


Sometimes we would like to have same route with different name, such guide to FAQ, help, how-to etc. What should we do when want to redirect same route against a bunch of routes ?. Here the alias came into picture

alias can be used in our index route file to redirect a route / a set of route to specific route. The following example will clarify this

import Vue from "vue";
 ......
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Line",
    component: LineChart,
     },   
  {
    // The redirect can also be targeting a named route:
    path: "/help",
    redirect: { name: 'About' }
  },
  {
    //redirect with aliad
    path: "/doughnut",
    name: "Doughnut",
    component: Doughnut,
    alias: ['/donut', '/dot']

  }, 
];
const router = new VueRouter({
  routes
});

export default router;

In the above router configuration I have a route doughnut which shows the doughnut chart. All I want to different routes set to this route. we redirect /doughnut route to the /donut, /dot routes. As a result all the routes are working

Following vue-route post may interest you

Redirect a route in Vue router


Sometimes we would like to have same route with different name, such guide to FAQ, help, how-to etc. Vue allow us to use the redirect feature for this purpose.

Redirect can be used in our index route file in the following format

import Vue from "vue";
 ......
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Line",
    component: LineChart,
     },   
  {
    // The redirect can also be targeting a named route:
    path: "/help",
    redirect: { name: 'About' }
  } 
];
const router = new VueRouter({
  routes
});

export default router;

In the above router configuration we redirect /help router to the named route /About. For multiple route we have to reply on alias.

Following vue-route post may interest you

How to add router in Vuejs project


Router is enabling us to use vue app as different URL enabled , such as one of Home, About etc. It is not a new feature, it exists in react, angular etc.

Virtually router turn single page vuejs app into multi page app, in reality these pages are components (known for developers, not the end user). When the user click on the link Vuejs simply switching between these components.

Vue Router

By adding a Vue router to our app Vue will create additional folder structure , a router, view and configuration files.

View and Router

Views are page components ( url such as /about), which can be consisting of other components to. You can create additional pages as you wish and should configure on the router file.

New Vue project with router

In the CLI command we can specify whether want to use router on not, that is it.

For existing non router project

For existing non router projects it is possible to add router, but be careful that the app.vue file will be replaced by the vue CLI. So copy the content to clipboard or another file and move it back when the process is completed.

Issue the following command to add router using the vue CLI.

vue add router // say no to history

That is all you know about router,

The following vue post posts may help you