Setup chart Js in vue

readme.md

Installation

npm install chart.js --save

chart-data.js

export const planetChartData = {
    type: 'pie',
    data: {
        labels: ['Mercury', 'Venus'],
        datasets: [
            {
                label: 'Number of Moons',
                data: [10, 20],
                backgroundColor: [
                    '#51cda0', // Blue
                    '#df7970',
                ],
                borderColor: [
                    '#36495d',
                    '#36495d',
                ],
                borderWidth: 3
            }
        ]
    },
    options: {
        responsive: true,
        lineTension: 1,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    padding: 25,
                }
            }]
        }
    }
}

export default planetChartData;

Chart.vue

<template>
   <canvas :id="id"></canvas>
</template>
<script>
import Chart from 'chart.js';
import planetChartData from '../../../../data/chart-data.js';
export default{
    props:["id"],
    data(){
        return {
            planetChartData: planetChartData,
        }
    },
    mounted() {
        this.createChart(this.id, this.planetChartData);
    },
    methods: {
        createChart(chartId, chartData) {
            const ctx = document.getElementById(chartId);
            const myChart = new Chart(ctx, {
                type: chartData.type,
                data: chartData.data,
                options: chartData.options,
            });
        }
    }
}
</script>