Vue-ChartJS Not reactive

Very new to build charts and have a chart that is not dynamic even though data is there and loading in to the dataset

My chart.js file looks like below.

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)
  }
}

and my component like :

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>

So I have made sure the push updates the data and that the chart is using said data, its more about the reactive chart and the data actually loaded to the user on the screen as new data is loaded.

1 answer

  • answered 2018-11-08 09:00 ittus

    You're passing chartData but using datacollection inside component.

    Please try updating:

    import { Line, mixins } from 'vue-chartjs'
    const { reactiveProp } = mixins
    
    export default {
      extends: Line,
      mixins: [reactiveProp],
      props: ['options', 'chartData'],
      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)
      }
    }