Vue Chartjs not reactive

Get Help
#1

So first this is my first attempt at chart rendering, Ok so I have a file called chart.js that holds my render

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

Then I call that as a component into a parent, now I have data feeding to it but the chart itself is not updating at all when the data changes

My component looks like so

<template>
    <div class="panel panel-default mbm">
        <table class="table table-condensed table-bordered mbn">
            <thead>
                <tr>
                    <td class="active pll prl ptm pbm">
                        <b>
                            <a @click="showLiveChat()">Chat</a>
                            <span class="pull-right">Live Chart</span>
                        </b>
                    </td>
                </tr>
            </thead>
        </table>
        <div class="panel-body">
        <Profit :chart-data="datacollection"></Profit>
        </div>
    </div>
</template>
<script>
import Profit from "@/components/Charts/profitLive.js";
export default {
  components: {
    Profit
  },
  props: {
    userSelf: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      chartData: [],
      bet: [],
      chartOptions: {
        chart: {
          title: "Live Bet data"
        },
        colors: ["#e0440e"],
        height: 270,
        width: 500,
        hAxis: {
          title: "Bets"
        },
        vAxis: {
          title: "Profit"
        }
      },
      profit: [],
      datacollection: null
    };
  },
  methods: {
      fillData () {
        this.datacollection = {
          labels: [0, 1000],
          datasets: [
            {
              label: 'Profit',
              backgroundColor: '#f87979',
              data: [this.chartData]
            },
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    },
   mounted () {
      this.fillData()
    },
   watch: {
    userSelf() {
      this.chartData.push(parseInt(this.userSelf.balance));
      this.bet.push(this.userSelf.stats.bets);
      this._chart.update();
    }
    
  }
};
</script>

Im using https://www.npmjs.com/package/vue-chartjs
So I know its wrong somewhere but any help would be awesome. Thank you in advanced

#2

Well, you update chartData in the parent, but that data is never passed to the chart. Just calling it chartData does not connect it to the chart somehow.

You have to actually pass the updated data to the chart through the chart-data prop. But you don’t do that. You pass datacollection to the chart component, which is never updated.

#3

Yeah I just seen that , so now the data is updating on the actual chart but still not reactive?

<template>
    <div class="panel panel-default mbm">
        <table class="table table-condensed table-bordered mbn">
            <thead>
                <tr>
                    <td class="active pll prl ptm pbm">
                        <b>
                            <a @click="showLiveChat()">Chat</a>
                            <span class="pull-right">Live Chart</span>
                        </b>
                    </td>
                </tr>
            </thead>
        </table>
        <div class="panel-body">
        <Profit :chart-data="datacollection" :options="chartOptions"></Profit>
        </div>
    </div>
</template>
<script>
import Profit from "@/components/Charts/profitLive.js";
export default {
  components: {
    Profit
  },
  props: {
    userSelf: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      datacollection: [],
      balance: [],
      bet: [],
      chartOptions: {
        chart: {
          title: "Live Bet data"
        },
        colors: ["#e0440e"],
        height: 270,
        width: 500,
        hAxis: {
          title: "Bets"
        },
        vAxis: {
          title: "Profit"
        }
      },
      profit: [],
      
    };
  },
  methods: {
      fillData () {
        this.datacollection = {
          labels: [0, 1000],
          datasets: [
            {
              label: 'Profit',
              backgroundColor: '#f87979',
              data: this.balance
            },
          ]
        }
      },
      
    },
   mounted () {
      this.fillData()
    },
   watch: {
    userSelf() {
      this.balance.push(parseInt(this.userSelf.balance));
      this.Profit.updateData();
    }
    
  }
};
</script>

and js
import { Line, mixins } from ‘vue-chartjs’
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.datacollection, this.options)
  }
}
#4

I’m not sure what you mean. If the chart updates, then the data is reactive?

Also that call to Profit.update() probably won’t do anything as Profit is the component definition, not the component instance from your template…

#5

As in its not live on the chart the chart doesnt update on the front end with the live data

1 Like
#6

Facing the same problem here!

#7

i know it is a late answer but i found a way to make the charts reactive.
The problem is, once the charts get rendered in a canvas we are not able to change the chart data and execute a rerender.

for that case you have to do it manually if you want to change chartData dynamicly.

assume you have a LineChart.vue which is a wrapper for your Chart.js.

you need to setup your LineChart.vue like the following

<line-chart  :key="updateChart" />

every time to want to change the chartData you just need to update updateChart
inside your component data.
i was just increment on that.

watch: {
    chartData: {
      deep: true,
      handler() {
        this.updateChart++
      }
    }
},