Have you checked out the examples in the docs?

Your problem is, that your data api call is async. So your chart is rendered, even if your data is not fully loaded.

There is also an example with vuex which is a bit outdated

You have to make sure that your data is fully loaded before you render your chart.


I faced similar issue while implementing Charts with API data in one of my Vue JS apps I was working on. I am using Vuex for state management, a simple solution for this problem is to move "chartData" from "data" to "computed" which would make it reactive. Below is the sample code from my app.

    <line-chart v-if="chartData"
      style="height: 100%"
import { mapActions, mapGetters } from 'vuex';
import * as expenseTypes from '../../store/modules/expense/expense-types';
import * as chartConfig from "../../components/reports/chart.config";
import BarChart from "../../components/reports/BarChart";

export default {
  components: {
  data () {
    return {
      extraOptions: chartConfig.chartOptionsMain
  computed: {
      allExpenses: expenseTypes.GET_ALL_EXPENSES,
      expenseCount: expenseTypes.GET_EXPENSE_COUNT,
    expenseAmount() {
      let expenseAmount = []; => {
      return expenseAmount;
    expenseLabels() {
      let expenseLabels = []; => {
      return expenseLabels;
    chartData() {
      return {
        datasets: [
            data: this.expenseAmount
        labels: this.expenseLabels
  async mounted() {
    await this.getAllExpenses();
    await this.fillChartData();
  methods: {
      getAllExpenses: expenseTypes.GET_ALL_EXPENSES_ACTION,

Related Query

More Query from same tag