DEV Community

loading...
Cover image for easy way to print charts in vue js

easy way to print charts in vue js

Sudhanshu Singh
Hello, I am Sudhanshu Singh , I am a Software engineer and Computer vision enthusiast. I talk with machines by python, I often participate in machine learning and data science competitions.
・2 min read

Chart.js is a powerful and easiest way to create charts in vuejs, we use HTML5 element for print the graphs. With Vue’s data() object, it is possible to store data and manipulate it to change graphs when needed.

We will do this task in 3 steps.

Step 1 - Setting up the project:

create new project-

vue create chart_example --default

navigate to project directory-

cd chart_example

install Chart.js in our project-

npm install chart.js

Step 2 - creating component for chart

We are going to print line chart for dataset of corona cases.

create CoronaCases.vue file and insert below code:

src/components/CoronaCases.vue

<template>
    <div>
        <canvas id="corona-chart"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js/auto'
import coronaData from '../coronaData.js'

export default {
    name: 'CoronaCases',
    data(){
        return {
            coronaData: coronaData
        }
    },
    mounted() {
        const ctx = document.getElementById('corona-chart');
        new Chart(ctx, this.coronaData);
}
}
</script>
Enter fullscreen mode Exit fullscreen mode

here coronaData.js file contains our data(it defines in next step).

Creating a chart with Chart.js resembles the following:

const ctx = document.getElementById('example');
const exampleChart = new Chart(ctx, {
type: '',
data: [],
options: {},
});

A <canvas> element is passed in along with a type, data, and options.

Step 3 - Creating the Chart data

We will define our data separate from main CoronaCases.vue file. create coronaData.js in src folder;

src/coronaData.js

export const coronaData = {
    type: "line",
    data: {
        labels: ["2020-01-24","2020-02-01","2020-02-07","2020-02-14","2020-02-21","2020-02-28","2020-03-06","2020-03-13","2020-03-20"],
        datasets: [
            {
                label: "World",
                data: [282, 4593,  20630,  43103,  73332, 80239,  90869, 113702, 179112],
                borderColor: "green",
                borderWidth:3
            },
            {
                label: "China",
                data: [278, 4537,  20471,  42708,  72528, 77262,  79968, 80859, 81116],
                borderColor: "red",
                borderWidth:3
            },
            {
                label: "Italy",
                data: [0, 0,  2,  3,  76, 124,  1128, 10149, 27980],
                borderColor: "Blue",
                borderWidth:3
            },
        ]
    },
    options: {
        responsive: true,
        lineTension: 1,
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                padding: 25
              }
            }
          ]
        }
      }
};

export default coronaData;
Enter fullscreen mode Exit fullscreen mode

Next, you will modify the App.vue file to use the new CoronaCases.vue:

src/App.vue

<template>
  <div id="app" class="App">
    <CoronaCases/>
  </div>
</template>

<script>
import CoronaCases from '@/components/CoronaCases';

export default {
  name: 'App',
  components: {
    CoronaCases
  }
}
</script>

<style>
</style>

Enter fullscreen mode Exit fullscreen mode

Now go to the terminal and fire the below command:

npm run serve

output

Alt Text

Discussion (0)