Use Chartist or vue-chartist

Marvos

Hello.

I’ve been trying to use Chartist in my Quasar project, but I can’t get it to work. Here’s what I tried:

npm install vue-chartist.
Add Quasar boot file ‘chartist.js’ with the contents:

import Vue from 'vue';
import vue_chartist from 'vue-chartist';

vue_chartist.install(Vue);
//Vue.use(vue_chartist)

Add boot file name to ‘boot’ array in quasar.conf.js
Add the following contents to my vue component:

<template>
  <q-page class="column flex flex-center">
    <div class="text-h5 text-uppercase text-primary "></div>
    <chartist
      style="width:200px; height:200px"
      type="Line"
      :data="chartData"
      :options="chartOptions"
      ratio="ct-major-second"
    ></chartist>
  </q-page>
</template>

<script>
import Vue from 'vue';
import 'app/node_modules/chartist/dist/chartist.min.css';
import 'app/node_modules/chartist/dist/chartist.min.js';
import Chartist from 'vue-chartist';
Vue.use(Chartist);
Vue.component('chartist', Chartist);
Chartist.install(Vue);

export default {
  name: 'Product',
  components: { Chartist },
  data() {
    return {
      chartData: {
        labels: ['A', 'B', 'C'],
        series: [
          [1, 3, 2],
          [4, 6, 5]
        ]
      },
      chartOptions: {
        lineSmooth: false
      }
    };
  }
}
</script>

When I try to run the example with ‘quasar dev’, the page loads, but no chart is displayed. The browser console displays the message :

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Chartist>
       <QPage>
         <Product>
           ...

But looking at index.js of vue-chartist, I can see that the render function is defined.

I must be missing something. How can I use Chartist charts in Quasar?

Marvos

Figured it out.

In vue-chartist, the install function (called at Vue.use(vue-chartist)) defines a global Vue component called ‘Chartist’. Importing it in each file overwrites this definition and causes the error I was having.

Edit the ‘chartist.js’ boot file to read:

import Vue from 'vue';
import vue_chartist from 'vue-chartist';

import 'app/node_modules/chartist/dist/chartist.min.css';

Vue.use(vue_chartist)

And edit my vue component file to read:

<template>
  <q-page class="column flex flex-center">
    <div class="text-h5 text-uppercase text-primary "></div>
    <chartist
      style="width:200px; height:200px"
      type="Line"
      :data="chartData"
      :options="chartOptions"
      ratio="ct-major-second"
    ></chartist>
  </q-page>
</template>

<script>
export default {
  name: 'Product',
  data() {
    return {
      chartData: {
        labels: ['A', 'B', 'C'],
        series: [
          [1, 3, 2],
          [4, 6, 5]
        ]
      },
      chartOptions: {
        lineSmooth: false
      }
    };
  }
}
</script>

It works now

PeterQF

I use ECharts and i love it: https://echarts.apache.org/examples/en/index.html

Please tell me if you want to try it out and i will give you all codes.

No More Posting New Topics!

Use Chartist or vue-chartist