chartjs-vue charts are empty

Question

I'm following examples to make a test chart & the chart renders, but it is blank with dummy data.

My first thought is maybe options aren't being passed for the lines, but with every other type of chart it is the same as if dataCollection just isn't being populated. I am very new to Vue (few hours) so maybe it has something to do with not updating state?

Languages.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.chartData, this.options) } }

StatsSection.vue

<template> <!-- Stats Section --> <div class="stats-wrapper" style="margin: 15px 0; padding: 15px;"> <languages :chart-data="datacollection"></languages> </div> </template> <script> import Languages from './charts/Languages.js' export default { components: { Languages }, data() { return { datacollection: {} } }, mounted() { this.fillData() }, methods: { fillData () { this.datacollection = { labels: [80, 12], datasets: [ { label: 'Data One', backgroundColor: '#f87979', data: [40, 60] }, { label: 'Data One', backgroundColor: '#f87979', data: [72, 43] } ] } } } } </script>

Jakub Juszczak · Accepted Answer · 2019-05-20 08:25:42Z

This is because you are calling the fillData() method in your mounted hook. Your chart gets rendered with an empty data object.

And the data gets filled after the chart is rendered. And as chart.js is not reactive, you have an empty chart.

Solutions:

Pass a filled data object to the chart instead using the fillData method
Or add the reactiveProp mixin

CodeSpent · Accepted Answer · 2019-05-17 05:43:58Z

It was indeed because no options were being passed for the gridlines. The example I was following assumes you already have your options set where I hadn't.

Languages.js

import { Bar, mixins } from 'vue-chartjs' export default { extends: Bar, mixins: [mixins.reactiveProp], props: ['chartData', 'options'], data() { return { options: { scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [{ gridLines: { display: false } }] }, legend: { display: true }, responsive: true, maintainAspectRatio: false } } }, mounted() { this.renderChart(this.chartdata, this.options) } }

starlight93 · Accepted Answer · 2020-06-25 10:08:36Z

call your fillData() method in created(){..here...} instead of mounted(){} in your StatsSection.vue will solve your problem. Created will be called before mounted, so your datacollection variable will not be null at first time.

Collectives™ on Stack Overflow

chartjs-vue charts are empty

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related