Create PolarArea 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 Polar Chart component

In-order to use Chartjs and create bubble chart 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 PolarAreaChart.js

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

export default {
  extends: PolarArea,  
  mixins: [mixins.reactiveProp],
  name: 'PolarAreaChart',
  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 PolarArea 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">
    <PolarAreaChart Chart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import PolarAreaChart from '@/components/PolarAreaChart'
export default {
  name: "PolarArea",
  components: { PolarAreaChart 
  },
  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-chartjs post may help you build app faster

Create Radar 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 Radar Chart component

In-order to use Chartjs and create Radar chart 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 Horizontal Bar 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 Horizontal Chart component

In-order to use Chartjs and create Horizontal Bar chart 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 Scatter 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 Bubble Chart component

In-order to use Chartjs and create scatter chart 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 Bubble 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 Bubble Chart component

In-order to use Chartjs and create bubble chart 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 BubbleChart.js

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

export default {
  extends: Bubble,  
  mixins: [mixins.reactiveProp],
  name: 'BubbleChart',
  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 Bubble 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">
    <BubbleChart Chart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import BubbleChart from '@/components/BubbleChart'
export default {
  name: "Bubble",
  components: { BubbleChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
          {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [
            {
              x: 20,
              y: 25,
              r: 5
            },
            {
              x: 40,
              y: 10,
              r: 10
            },
            {
              x: 30,
              y: 22,
              r: 30
            }
          ]
        },
        {
          label: 'Data Two',
          backgroundColor: '#7C8CF8',
          data: [
            {
              x: 10,
              y: 30,
              r: 15
            },
            {
              x: 20,
              y: 20,
              r: 10
            },
            {
              x: 15,
              y: 8,
              r: 30
            }
          ]
        }
      ]
    },
    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-chartjs post may help you build app faster

Create Pie 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 Pie Chart component

Pie charts are easiest option when we have limited amount of data sets. In-order to use Chartjs and create pie chart 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 PieChart.js

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

export default {
  extends: Pie,
  mixins: [mixins.reactiveProp],
  name: 'PieChart',
  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 Pie 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">
    <PC :chartData="chartdata" />
  </div>
</template>

<script>
// @ is an alias to /src
import PieChart from "@/components/PieChart";
export default {
  name: "PieChart",
  components: { 'PC':PieChart },
  data() {
    return {
      chartdata: {
        labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
        datasets: [
          {
            backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
            data: [40, 20, 80, 10]
          }
        ]
      }
    };
  },
};
</script>
<style>
.flex-container {
  display: flex;
}
</style>

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

Following vue-chartjs post may help you build app faster

Create Bar 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 Bar 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 BarChart.js

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

export default {
  extends: Bar,  
  mixins: [mixins.reactiveProp],
  name: 'BarChart',
  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 Bar 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">
    <BarChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import BarChart from '@/components/BarChart'
export default {
  name: "Bar",
  components: { BarChart 
  },
  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-chartjs post may help you build app faster

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