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