Vue Chartjs not reactive

#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!