Chartjs-Getting error "this.renderChart is not a function" or "TypeError: Object(…) is not a function" Chart.js Nuxt v2

by

1👍

✅

after many searches i finally found out nuxt v2 cant import and use "vue-chartjs" and instead of "vue-chartjs" we should use the "vue-chartjs/legacy",
here is the solution:

installation

1-Run

npm i vue-chartjs

2-Then Run

npm i chart.js hchs-vue-charts

3-/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,
});

4-.vue page

  <template>
     <client-only placeholder="منتظر بمانید...">
      <line-chart
        :chart-options="options"
        :chart-data="chartData"
        :height="250"
        :width="350"
        chart-id="lineChart"
      />
    </client-only>
  </template>

  <script>
  chartData: {
      labels: ['sun','mon','tues'],
      datasets: [
        {
          label: 'Views',
          backgroundColor: ["tomato", "orange", "yellow"],

          data: ['0','2','5']
        }
      ]
    },
    options:{
      responsive: true,
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'views'
      },
      scales: {
        y: {
          suggestedMin: 0,
          ticks: {
            precision: 0
          }
        }
      }
    },
  </script>

5-nuxt.config.js (don’t forget the mode:’client’)

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

Leave a comment