[Chartjs]-How to install vue-chartkick and use it in my components?

by

2👍

✅

just use chart.js version 2.9 and vue-chartkick 0.6.1

npm install vue-chartkick@0.6.1 chart.js@2.9 --save

and import in app.js like below:

import {Chart} from 'chart.js'
import Chartkick from 'vue-chartkick'
Vue.use(Chartkick.use(Chart));

0👍

I used Chartkick with Fastapi. I struggled to implement it on the backend (no npm installer), then found the solution at https://github.com/ankane/vue-chartkick#installation

Put the code inside your main template file eg index.html:

enter image description here

My main.js file, running on fastapi server:

import { MyTitle } from "./title.js";
import { MyName } from "./name.js";

export const app = Vue.createApp({
  delimiters: ["[[", "]]"],
  data() {
    return {};
  },
});

app.component("MyTitle", MyTitle);
app.component("MyName", MyName);
app.use(VueChartkick);

const vm = app.mount("#app");

Leave a comment