Create Radar component in Vue

Create component

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

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

export default {
  extends: Radar,  
  mixins: [mixins.reactiveProp],
  name: 'RadarChart',
  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 Radar from the vue-chartjs module.

Using the component

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

  <div class="flex-container">
    <RadarChart Chart :chartData="chartdata" :options="options" />

// @ is an alias to /src
import RadarChart from '@/components/RadarChart'
export default {
  name: "Radar",
  components: { RadarChart 
  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

.flex-container {
  display: flex;


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

Following vue-chartjs post may help you build app faster

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.