Chartjs-Using ChartJs In a VueJs component

by

0👍

In your component, before the export default {}, import the Chart module.

import Chart from 'chart.js';

export default {}

Let’s say this is your template:

<template>
  <div id="app">
    <canvas id="your-chart"></canvas>
  </div>
</template>

then you can add a method that will create the chart:

methods: {
  createChart(chartId, chartData) {
    const ctx = document.getElementById(chartId);
    const myChart = new Chart(ctx, {
      type: chartData.type,
      data: chartData.data,
      options: chartData.options,
    });
  }
}

and call it inside the mounted lifecycle:

mounted() {
  const data = { // chartobject }
  this.createChart('planet-chart', data);
}

alternatively, you can use a vue wrapper for Chart.js

Leave a comment