Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use Chart.js with Nuxt v2.11.0

Use Chart.js with Nuxt v2.11.0

Line chart example

  • Run npm i vue-chartjs
  • Run npm i chart.js hchs-vue-charts
  • Create a file called chart.js and save it in the /plugins directory
  • Give chart.js the following contents
import Vue from 'vue'
import { Line } from 'vue-chartjs'

Vue.component('line-chart', {
	extends: Line,
	props: ['data', 'options'],
	mounted () {
		this.renderChart(this.data, this.options)
	}
})
  • Include line-chart.js in nuxt.config.js plugins like so
plugins: [
	{src: '~/plugins/chart.js', mode: 'client'}
],
  • Nuxt may have to be restarted at this point: npm run dev or nuxt
  • Use the line chart in your views like so:
  <template>
    <client-only>
        <line-chart :data="chartData"></line-chart>
    </client-only>
  </template>

  <script>
  export default {
    data() {
      return {
        chartData: {
          datasets: [{
            label: 'Title',
            data: [45, 55, 48, 35, 12]
          }]
        }
      };
    }
  }
  </script>
  • The chart will still render without client-only however the client side DOM tree will no longer match the server render and a console error will be shown.

Multi chart example

  • You can add multiple Chart.js types to your chart.js plugin file like so:
import Vue from 'vue'
import { Line } from 'vue-chartjs'
import { Pie } from 'vue-chartjs'

Vue.component('line-chart', {
	extends: Line,
	props: ['data', 'options'],
	mounted () {
		this.renderChart(this.data, this.options)
	}
})

Vue.component('pie-chart', {
	extends: Pie,
	props: ['data', 'options'],
	mounted () {
		this.renderChart(this.data, this.options)
	}
})
@smidkristian
Copy link

smidkristian commented Aug 14, 2021

Thanks buddy, nice and clear ... one thing though, now you have to specify a version to chart.js@2.9.4 cause 3.x is not compatiable. Cheers!
`

@RDilly
Copy link

RDilly commented Aug 15, 2021

hey, I'm getting the error
"this.renderChart is not a function"

Does anyone know what might be causing this?
Thank you!

@Abbos-Coder-007
Copy link

Abbos-Coder-007 commented Feb 21, 2022

i wrote this code but it disnt work, i think i install with npm , but i use yarn in nuxtjs

@aivaras-ciurlionis
Copy link

aivaras-ciurlionis commented Apr 22, 2022

I was able to fix the issue by changing the following code:

/plugins/chart.js :

import Vue from "vue";
import { Line } from "vue-chartjs/legacy";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement,
} from "chart.js";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  BarElement,
  CategoryScale,
  LinearScale,
  LineElement,
);

Vue.component("line-chart", {
  extends: Line,
});

nuxt.config.js:

plugins: [
	{src: '~/plugins/chart.js', mode: 'client'}
]

And then using the component as:

<template>
  <div>
    <client-only placeholder="Loading...">
      <line-chart
        :chart-options="options"
        :chart-data="data"
        :height="100"
        :width="300"
        chart-id="lineChart"
      />
    </client-only>
  </div>
</template>

Nuxt/vue/chart.js versions used:

{
   "chart.js": "^3.7.1",
   "vue-chartjs": "^4.0.6",
   "nuxt": "^2.15.7"
}

@NekiKulLik
Copy link

NekiKulLik commented Apr 24, 2022

@aivaras-ciurlionis Hmm I'm using pretty much the same code and exactly the same versions of Nuxt and Chart.js but can't modify options of any chart. For instance - if I pass in to hide the legend, it ignores it and uses default. Did you experience the same issue?

@Stacker8
Copy link

Stacker8 commented May 19, 2022

@aivaras-ciurlionis Hmm I'm using pretty much the same code and exactly the same versions of Nuxt and Chart.js but can't modify options of any chart. For instance - if I pass in to hide the legend, it ignores it and uses default. Did you experience the same issue?

Yep same issue for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment