Is it possible to use with axios?

[altcointrading]

Expected Behavior

Chart to be rendered with data coming via axios get request

Actual Behavior

Chart is rendered before data arrives, in spite of importing the reactive mixin chart never gets updated.

I am importing vue-chartjs in a component like so

<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default Line.extend({
  mixins: [reactiveProp],
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
})
</script>

This component then is imported into another component that gets the actual data from an API. In dev mode the chart does get drawn, however when I build the app for static hosting the problem appears.

Environment

• vue.js version: 2
• vue-chart.js version: latest
• npm version: latest

[apertureless]

Hey @altcointrading

yes, it is working with axios and apis.

I guess it is working on your local dev environment, because the fetch of your json is fast enough to finish, before the chart get's drawn.

However, the mixin will never trigger! Because if you take a look in the docs the mixin will create a prop named chartData and add a vue watcher to it. You can see it in the source code . But you are passing your data to your own prop data so chartData where the watcher is attached to, is always empty.

Try to change it to chartData instead.

I don't know that you're planning, but you don't nessasary need the reactive prop. It is only usefull, if you plan to change the data, while the chart is rendered. Like updating the data. If you only want to fetch some data and then render the chart, you can simply use a v-if

Make a new data model isLoaded which is set to false and in your axios promise, after you transformed your data you set it to true.

And then just add the v-if=isLoaded to your chart componente template. This way the chart gets only rendered if all data is there. Thats how I did it for http://npm-stats.org

[altcointrading]

Hi @apertureless - thanks a lot. It seems the charting I need is a bit too much anyway so I'll be looking for another way but for the meantime with small amount of data points i got it working with

methods: {
    isLoaded () {
      return false
    }
  },

which switsches to true when data is processed, and

<template>
  <section class="container">
    <single-line v-if="isLoaded==true" :data="this.points" :options="{responsive: true, maintainAspectRatio: true}"/>
    <p>{{this.points.labels}}</p>
  </section>
</template>

Cheers!

[jiangdi0924]

useful