DEV Community 👩‍💻👨‍💻

Cover image for easy way to print charts in vue js
Sudhanshu Singh
Sudhanshu Singh

Posted on

easy way to print charts in vue js

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

Top comments (0)

🌚 Life is too short to browse without dark mode