Use Chartist or vue-chartist



  • 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?



  • 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



  • 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.