Refresh the vue-chart component in a nuxt.js application

Question

Refresh the vue-chart component in a nuxt.js application

I'm currently working on a nuxt project and I need to incorporate some charts into it. I'm using vue-chartjs as a plugin for this purpose. However, the issue I'm facing is that the chart data is fetched after the chart has already been drawn, resulting in an empty chart. I'm struggling to find a way to access the plugin and rerender the chart once the data is available. Below is the code snippet for the plugin:

// plugins/vue-chart.js

import Vue from 'vue'
import { Bar, Doughnut, Line, Pie } from 'vue-chartjs'

const registerComponent = function (name, originalComponent) {
  Vue.component(
    name,
    {
      extends: originalComponent,
      props: ['data', 'options'],
      mounted () {
        this.renderChart(this.data, this.options)
      },
      updated () {
        this.renderChart(this.data, this.options)
      }
    }
  )
}

registerComponent('BarChart', Bar)
registerComponent('DoughnutChart', Doughnut)
registerComponent('LineChart', Line)
registerComponent('PieChart', Pie)

Here's how I utilize the plugin to draw a line chart:

components/Charts.vue

<template>
  <client-only>
    <LineChart :data="lineData" :options="options" />
  </client-only>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      lineData: {
        labels: [],
        datasets: [
          {
            label: 'Close',
            data: [],
          },
          {
            label: 'High',
            data: [],
          },
        ],
      },
      options: {
        responsive: true,
        scales: {
          x: {
            display: true,
            title: {
              display: true,
            },
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'Value',
            },
          },
        },
      },
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('/api/entries')
      if (response.status === 200) {
        for (let i = 0; i < response.data.length; i++) {
          this.lineData.labels.push(response.data[i].date)
          this.lineData.datasets[0].data.push(response.data[i].close)
          this.lineData.datasets[1].data.push(response.data[i].high)
        }
      }
    } catch (e) {
      console.log(e)
    }
  },
}
</script>

I would greatly appreciate any suggestions or solutions to overcome this dilemma!

Edit I had to downgrade the versions of chart.js and vue-chartjs in order to successfully compile the project.

Below is my package.json

{
  "name": "xyz",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev-fe": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies":
    "@nuxtjs/axios": "^5.13.6",
    "chart.js": "^2.7.1",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "vue": "^2.6.14",
    "vue-chartjs": "^3.4.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.2.0",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1",
    "postcss": "^8.3.5"
  }
}

My nuxt.config.js file pretty much follows the default settings except for the addition of

{ src: '~/plugins/vue-chart.js', mode: 'client' }

to the list of plugins.

javascript vue.js charts nuxt.js vue-chartjs

Answer 1

Answer №1

Okay, I have a functional example set up as follows.

Presenting my vue-chartjs.js plugin

import Vue from 'vue'
import { Bar, Doughnut, Line, Pie, mixins } from 'vue-chartjs'

const registerComponent = function (name, originalComponent) {
  Vue.component(name, {
    extends: originalComponent,
    mixins: [mixins.reactiveProp],
    props: {
      chartData: {
        type: Object,
        default: () => {},
      },
      chartOptions: {
        type: Object,
        default: () => {},
      },
    },
    mounted() {
      this.renderChart(this.chartData, this.chartOptions)
    },
  })
}

registerComponent('BarChart', Bar)
registerComponent('DoughnutChart', Doughnut)
registerComponent('LineChart', Line)
registerComponent('PieChart', Pie)

/pages/index.vue

<template>
  <div>
    <line-chart
      :key="updated"
      :chart-data="lineData"
      :chart-options="options"
    />
  </div>
</template>

<script>
import FakeData from '@/fake.json'

export default {
  data() {
    return {
      updated: 0,
      lineData: {
        labels: [],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '',
            data: [],
          },
          {
            label: 'Data Two',
            backgroundColor: '',
            data: [],
          },
        ],
      },
      options: {
        responsive: true,
        scales: {
          x: {
            display: true,
            title: {
              display: true,
            },
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'Value',
            },
          },
        },
      },
    }
  },
  async fetch() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const data = await response.json()
    console.log('fake API title fetched:', data.title)

    const actualData = FakeData.data
    for (let i = 0; i < actualData.length; i++) {
      this.lineData.labels.push(actualData[i].date)
      this.lineData.datasets[0].backgroundColor = actualData[i].color1
      this.lineData.datasets[0].data.push(actualData[i].close)
      this.lineData.datasets[1].backgroundColor = actualData[i].color2
      this.lineData.datasets[1].data.push(actualData[i].high)
    }
    this.updated++
  },
}
</script>

and the fabricated content of my dummy .json API since an actual API was not available to retrieve real data

{
  "data": [
    {
      "date": "Jan",
      "color1": "#EC368D",
      "color2": "#51E5FF",
      "close": "0.4",
      "high": "0.7"
    },
    {
      "date": "Feb",
      "color1": "#EC368D",
      "color2": "#51E5FF",
      "close": "0.2",
      "high": "0.5"
    },
    {
      "date": "Mar",
      "color1": "#EC368D",
      "color2": "#51E5FF",
      "close": "0.6",
      "high": "0.8"
    }
  ]
}

I simulated an API call, so it will serve well as a demonstration for you.

The concept behind this approach includes utilizing the key workaround, which may not be ideal, but with limited support from the maintainer.

Nonetheless, this is currently the most viable solution.

Here is the end outcome along with associated details in the Github repository.

https://i.sstatic.net/Apxtp.png

Answer 2

Okay, I have a functional example set up as follows.

Presenting my vue-chartjs.js plugin

import Vue from 'vue'
import { Bar, Doughnut, Line, Pie, mixins } from 'vue-chartjs'

const registerComponent = function (name, originalComponent) {
  Vue.component(name, {
    extends: originalComponent,
    mixins: [mixins.reactiveProp],
    props: {
      chartData: {
        type: Object,
        default: () => {},
      },
      chartOptions: {
        type: Object,
        default: () => {},
      },
    },
    mounted() {
      this.renderChart(this.chartData, this.chartOptions)
    },
  })
}

registerComponent('BarChart', Bar)
registerComponent('DoughnutChart', Doughnut)
registerComponent('LineChart', Line)
registerComponent('PieChart', Pie)

/pages/index.vue

<template>
  <div>
    <line-chart
      :key="updated"
      :chart-data="lineData"
      :chart-options="options"
    />
  </div>
</template>

<script>
import FakeData from '@/fake.json'

export default {
  data() {
    return {
      updated: 0,
      lineData: {
        labels: [],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '',
            data: [],
          },
          {
            label: 'Data Two',
            backgroundColor: '',
            data: [],
          },
        ],
      },
      options: {
        responsive: true,
        scales: {
          x: {
            display: true,
            title: {
              display: true,
            },
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'Value',
            },
          },
        },
      },
    }
  },
  async fetch() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const data = await response.json()
    console.log('fake API title fetched:', data.title)

    const actualData = FakeData.data
    for (let i = 0; i < actualData.length; i++) {
      this.lineData.labels.push(actualData[i].date)
      this.lineData.datasets[0].backgroundColor = actualData[i].color1
      this.lineData.datasets[0].data.push(actualData[i].close)
      this.lineData.datasets[1].backgroundColor = actualData[i].color2
      this.lineData.datasets[1].data.push(actualData[i].high)
    }
    this.updated++
  },
}
</script>

and the fabricated content of my dummy .json API since an actual API was not available to retrieve real data

{
  "data": [
    {
      "date": "Jan",
      "color1": "#EC368D",
      "color2": "#51E5FF",
      "close": "0.4",
      "high": "0.7"
    },
    {
      "date": "Feb",
      "color1": "#EC368D",
      "color2": "#51E5FF",
      "close": "0.2",
      "high": "0.5"
    },
    {
      "date": "Mar",
      "color1": "#EC368D",
      "color2": "#51E5FF",
      "close": "0.6",
      "high": "0.8"
    }
  ]
}

I simulated an API call, so it will serve well as a demonstration for you.

The concept behind this approach includes utilizing the key workaround, which may not be ideal, but with limited support from the maintainer.

Nonetheless, this is currently the most viable solution.

Here is the end outcome along with associated details in the Github repository.

https://i.sstatic.net/Apxtp.png

Refresh the vue-chart component in a nuxt.js application

Answer №1

Similar questions

Detecting URL changes, excluding just the hash, with JavaScript/jQuery

The browser does not automatically set the Cookie

Efficiently search and filter items across multiple tabs using a single search bar in the Ionic 2

Vue.js - When trying to access the `use` property, it throws an error saying it is undefined

Remove background image when input form field is in focus

In a REST api, what is the appropriate response for a property that is missing a value?

What is the best way to utilize an Angular service method from a controller?

How to display a video with full height and width using CSS or JavaScript

Operate on Nested JSON Arrays

Is there a way to use ng-click to switch the ng-src of one image with that of another?

Include a parent class within the style tags in your CSS code

JavaScript method overloading involves defining multiple functions with the same name

Tips for retrieving specific information from Wikipedia using AJAX

Invoking functions with JavaScript objects

Disabling a chosen option within a dropdown menu

Mobile page sliding mechanism

Angular animation triggered when a specific condition is satisfied

Trick to keep horizontal element alignment intact when scroll bar appears

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

Changing an AngularJS Protractor promise from a string to a decimal number - how to do it?