In this tutorial, I am going to explain how to create awesome charts in Vue.js using chart.js and vue-chart.js package. When it comes to modern web applications data visualization is important becuase users can esaily undestand and figure out data using charts. You can see a complete preview of this tutorial from here.

Prerequisites

  • Vue CLI
    • To Continue with this tutorial, you should have installed Vue CLI in your pc. If you are still not installed Vue.js CLI in your machine you can install it by running below command.

    1
    npm install -g @vue/cli

    Create new Vue project

    Now you should need to create a new Vue project by running below command.

    1
    vue create vue-chart-js-app

    After running this command CLI starts to create your project and it asks following questions.

    1
    2
    3
    4
    5
    6
    7
    8
    # ? Please pick a preset: Manually select features
    # ? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
    # ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
    # ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
    # ? Pick a linter / formatter config: Basic
    # ? Pick additional lint features: Lint on save
    # ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
    # ? Save this as a preset for future projects? (y/N) No

    After the project creation, get inside the project by running following command.

    1
    cd vue-chart-js-app

    Install Chart.js and vue-chartjs Plugins

    Now we need to install chart.js and vue-chartjs plugins to continue with our tutorial. To install above plugins run one command from below commands.

    1
    2
    3
    4
    5
    # npm
    npm install vue-chartjs chart.js --save

    # yarn
    yarn add vue-chartjs chart.js

    Chart.js is a powerful, flexible open-source JavaScript library and it helps to create various stunning charts using HTML5 canvas. It contains with chart likes,

  • Line
  • Bar
  • Doughnut
  • Pie
  • Radar
  • Polar Area
  • Bubble
  • Scatter

    • Creating & Setting Up Charts Components

    Create the given below components inside the src/views folder:
  • Line.vue => (Home.vue)
  • Bar.vue
  • Doughnut.vue
  • Pie.vue
  • Radar.
  • PolarArea.vue
  • Bubble.vue
  • Scatter.vue

    • Creating & Setting Up Charts Views

    Create the given below views src/components folder:
  • LineChart.vue
  • BarChart.vue
  • DoughnutChart.vue
  • PieChart.vue
  • RadarChart.vue
  • PolarAreaChart.vue
  • BubbleChart.vue
  • ScatterChart.vue
    • Now we have all finish with our components and views.

    Create & Set up Routes in Vue

    To configure routes in our application, Open router/index.js file and replace the existing code with the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'

    Vue.use(VueRouter)

      const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/bar',
        name: 'Bar',
        component: () => import('../views/Bar.vue')
      },
      {
        path: '/doughnut',
        name: 'Doughnut',
        component: () => import('../views/Doughnut.vue')
      },
      {
        path: '/pie',
        name: 'Pie',
        component: () => import('../views/Pie.vue')
      },
      {
        path: '/radar',
        name: 'Radar',
        component: () => import('../views/Radar.vue')
      },
      {
        path: '/polar-area',
        name: 'PolarArea',
        component: () => import('../views/PolarArea.vue')
      },
      {
        path: '/bubble',
        name: 'Bubble',
        component: () => import('../views/Bubble.vue')
      },
      {
        path: '/scatter',
        name: 'Scatter',
        component: () => import('../views/Scatter.vue')
      }
    ]

    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })

    export default router

    Open src/App.vue and replace the current code with the given blow code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <template>
      <div id="app">
        <div id="nav">
          <router-link to="/">Line</router-link> 
          <router-link to="/bar">Bar</router-link> 
          <router-link to="/doughnut">Doughnut</router-link> 
          <router-link to="/pie">Pie</router-link> 
          <router-link to="/radar">Radar</router-link> 
          <router-link to="/polar-area">Polar Area</router-link> 
          <router-link to="/bubble">Bubble</router-link> 
          <router-link to="/scatter">Scatter</router-link>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-12">
              <router-view />
            </div>
          </div>
        </div>

      </div>
    </template>

    <style lang="scss">
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
      }

      #nav {
        padding: 30px 30px 60px;

        a {
          font-weight: bold;
          color: #2c3e50;

          &.router-link-exact-active {
            color: #42b983;
          }
        }
      }
    </style>

    Now we need to enable the navigation in Vue by defining the router-link inside the src/App.vue.
    The <router-view/> directive will display the associated view for the particular Chart component.

    Line Chart Example

    Go to components/LineChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <script>
      import { Line } from 'vue-chartjs'

      export default {
        extends: Line,
        data () {
          return {
            chartData: {
              labels: ["Babol", "Cabanatuan", "Daegu", "Jerusalem", "Fairfield", "New York", "Gangtok", "Buenos Aires", "HafarAl-Batin", "Idlib"],
              datasets: [
                {
                  label: 'Line Chart',
                  data: [600, 1150,	342, 6050, 2522, 3241, 1259, 157, 1545, 9841],
                  fill: false,
                  borderColor: '#2554FF',
                  backgroundColor: '#2554FF',
                  borderWidth: 1
                }
              ]
            },
            options: {
              scales: {
                yAxes: [{
                  ticks: {
                    beginAtZero: true
                  },
                  gridLines: {
                    display: true
                  }
                }],
                xAxes: [ {
                  gridLines: {
                    display: false
                  }
                }]
              },
              legend: {
                display: true
              },
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted () {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Home.vue. and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Line Chart Example in Vue</h3>
        <line-chart></line-chart>
      </div>
    </template>

    <script>
    import LineChart from '@/components/LineChart'

    export default {
      components: {
        LineChart
      }
    }
    </script>

    Bar Chart Example

    Go to components/BarChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <script>
      import { Bar } from 'vue-chartjs'

      export default {
        extends: Bar,
        data() {
          return {
            chartData: {
              labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09",
                "2015-10", "2015-11", "2015-12"
              ],
              datasets: [{
                label: 'Bar Chart',
                borderWidth: 1,
                backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)',
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)',
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
                ],
                pointBorderColor: '#2554FF',
                data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1]
              }]
            },
            options: {
              scales: {
                yAxes: [{
                  ticks: {
                    beginAtZero: true
                  },
                  gridLines: {
                    display: true
                  }
                }],
                xAxes: [{
                  gridLines: {
                    display: false
                  }
                }]
              },
              legend: {
                display: true
              },
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted() {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Bar.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Bar Chart Example in Vue</h3>
        <bar-chart></bar-chart>
      </div>
    </template>

    <script>
    import BarChart from '@/components/BarChart'

    export default {
      components: {
        BarChart
      }
    }
    </script>

    Doughnut Chart Example

    Go to components/DoughnutChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <script>
      import { Doughnut } from 'vue-chartjs'

      export default {
        extends: Doughnut,
        data () {
          return {
            chartData: {
              labels: ["Babol",	"Cabanatuan",	"Daegu",	"Jerusalem"],
              datasets: [{
                  borderWidth: 1,
                  borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)'                
                  ],
                  backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',                
                  ],
                  data: [1000,	500,	1500,	1000]
                }]
            },
            options: {
              legend: {
                display: true
              },
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted () {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Doughnut.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Doughnut Chart Example in Vue</h3>
        <doughnut-chart></doughnut-chart>
      </div>
    </template>

    <script>
    import DoughnutChart from '@/components/DoughnutChart'

    export default {
      components: {
        DoughnutChart
      }
    }
    </script>

    Pie Chart Example

    Go to components/PieChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <script>
      import { Pie } from 'vue-chartjs'

      export default {
        extends: Pie,
        data () {
          return {
            chartData: {
              labels: ["Italy", "India", "Japan", "USA",],
              datasets: [{
                  borderWidth: 1,
                  borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)'            
                  ],
                  backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',                
                  ],
                  data: [1000,	500,	1500,	1000]
                }]
            },
            options: {
              legend: {
                display: true
              },
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted () {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Pie.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Pie Chart Example in Vue</h3>
        <pie-chart></pie-chart>
      </div>
    </template>

    <script>
    import PieChart from '@/components/PieChart'

    export default {
      components: {
        PieChart
      }
    }
    </script>

    Radar Chart Example

    Go to components/RadarChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <script>
      import { Radar } from 'vue-chartjs'

      export default {
        extends: Radar,
        data () {
          return {
            chartData: {
              labels: [
                 "Babol",	
                 "Cabanatuan",	
                 "Daegu",	
                 "Jerusalem",	
                 "Fairfield",	
                 "New York",
                 "Gangtok", 
                 "Buenos Aires", 
                 "Hafar Al-Batin", 
                 "Idlib"
              ],
              datasets: [
                {
                  label: 'Radar Chart',
                  borderWidth: 1,
                  backgroundColor: 'rgba(54, 162, 235, 0.2)',
                 
                  data: [
                    32127289, 
                    24724027, 
                    25820412, 
                    23685667, 
                    25644258, 
                    22433220, 
                    22966210, 
                    22743184, 
                    21880515, 
                    21543111
                  ]
                }
              ]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted () {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Radar.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Radar Chart Example in Vue</h3>
        <radar-chart></radar-chart>
      </div>
    </template>

    <script>
    import RadarChart from '@/components/RadarChart'

    export default {
      components: {
        RadarChart
      }
    }
    </script>>

    Polar Area Chart Example

    Go to components/PolarAreaChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <script>
      import { PolarArea } from 'vue-chartjs'

      export default {
        extends: PolarArea,
        data () {
          return {
            chartData: {
              labels: ['Pink', 'Blue', 'Yellow', 'Green', 'Purple'],
              datasets: [
                {
                  label: 'Polar Area Chart',
                  borderWidth: 1,
                  backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',                
                  ],
                  data: [8, 14, 12, 7, 20]
                }
              ]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted () {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/PolarArea.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Polar Area Chart Example in Vue</h3>
        <polar-area-chart></polar-area-chart>
      </div>
    </template>

    <script>
    import PolarAreaChart from '@/components/PolarAreaChart'

    export default {
      components: {
        PolarAreaChart
      }
    }
    </script>

    Bubble Chart Example

    Go to components/BubbleChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    <script>
      import { Bubble } from 'vue-chartjs'

      export default {
        extends: Bubble,
        data() {
          return {
            chartData: {
              datasets: [{
                label: 'Population Data',
                borderWidth: 1,
                borderColor: '#2554FF',
                backgroundColor: '#2554FF',
                data: [{
                    x: 6,
                    y: 3,
                    r: 15
                  }, {
                    x: 3,
                    y: 12,
                    r: 4
                  },
                  {
                    x: 5,
                    y: 15,
                    r: 10
                  },
                  {
                    x: 3,
                    y: 12,
                    r: 8
                  },
                  {
                    x: 4,
                    y: 5,
                    r: 20
                  },
                  {
                    x: 2,
                    y: 6,
                    r: 3
                  },
                  {
                    x: 4,
                    y: 9,
                    r: 11
                  },
                  {
                    x: 5,
                    y: 10,
                    r: 6
                  }
                ]
              }]
            },
            options: {
              legend: {
                display: true
              },
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted() {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Bubble.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Bubble Chart Example in Vue</h3>
        <bubble-chart></bubble-chart>
      </div>
    </template>

    <script>
    import BubbleChart from '@/components/BubbleChart'

    export default {
      components: {
        BubbleChart
      }
    }
    </script>

    Scatter Chart Example

    Go to components/ScatterChart.vue and place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    <script>
      import { Scatter } from 'vue-chartjs'

      export default {
        extends: Scatter,
        data() {
          return {
            chartData: {
              datasets: [{
                label: 'Population Data',
                borderWidth: 1,
                borderColor: '#2554FF',
                backgroundColor: '#2554FF',
                data: [{
                    x: 6,
                    y: 3,
                    r: 15
                  }, {
                    x: 3,
                    y: 12,
                    r: 4
                  },
                  {
                    x: 5,
                    y: 15,
                    r: 10
                  },
                  {
                    x: 3,
                    y: 12,
                    r: 8
                  },
                  {
                    x: 4,
                    y: 5,
                    r: 20
                  },
                  {
                    x: 2,
                    y: 6,
                    r: 3
                  },
                  {
                    x: 4,
                    y: 9,
                    r: 11
                  },
                  {
                    x: 5,
                    y: 10,
                    r: 6
                  }
                ]
              }]
            },
            options: {
              legend: {
                display: true
              },
              responsive: true,
              maintainAspectRatio: false
            }
          }
        },
        mounted() {
          this.renderChart(this.chartData, this.options)
        }
      }
    </script>

    Go to views/Scatter.vueand place the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <template>
      <div>
        <h3>Scatter Chart Example in Vue</h3>
        <scatter-chart></scatter-chart>
      </div>
    </template>

    <script>
    import ScatterChart from '@/components/ScatterChart'

    export default {
      components: {
        ScatterChart
      }
    }
    </script>

    Wrap Up

    Now, we have finished with our coding part. To check your project in the browser run below command
    1
    npm run serve

    You can download the source code of this tutorial from this GitHub repository.