CODEWITHSUNDEEP
javascriptvue.jsvue-chartjs
codeinprogress
codeinprogress

Reputation: 3501

vue-chartjs unable to render line chart

MyChart.vue

<template>
  <v-container>
    <v-card elevation="2">
      <v-card-title>AQI Comparison</v-card-title>
      <line-chart :chart-data="datacollection"></line-chart>
    </v-card>
  </v-container>
</template>

<script>
import LineChart from "./LineChart.js";

export default {
  name: "AQIChartComponent",
  components: {
    LineChart
  },
  data() {
    return {
      datacollection: {
        labels: [
          "week 1",
          "week 2",
          "week 3",
          "week 4",
          "week 5",
          "week 6",
          "week 7",
          "week 8",
          "week 9",
          "week 10",
        ],
        datasets: [
          {
            data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false,
          },
          {
            data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
            label: "Asia",
            borderColor: "#8e5ea2",
            fill: false,
          },
          {
            data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
            label: "Europe",
            borderColor: "#3cba9f",
            fill: false,
          },
          {
            data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
            label: "Latin America",
            borderColor: "#e8c3b9",
            fill: false,
          },
          {
            data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
            label: "North America",
            borderColor: "#c45850",
            fill: false,
          },
        ],
      }
    };
  }
};
</script>

LineChart.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)
  }
}

I get the following error:

[Vue warn]: Error in mounted hook: "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor"

found in

---> <LineChart>
       <VCard>
         <AQIChartComponent> at src/components/AQIChartComponent.vue
           <AQIComponent> at src/components/AQIComponent.vue
             <VMain>
               <VApp>
                 <App> at src/App.vue
                   <Root>

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

I even changed the attribute from :chart-data to :chartData but its the same error. I am using the example code from their documentation, what am I doing wrong here?

Upvotes: 2

Views: 5181

Answers (2)

Endriyas
Endriyas

Reputation: 606

First, update your chart.js version to 2. You can do this by executing the following command.

npm install chart.js@2

send the chart options together with the data. like this.

<template>
  <v-container>
    <v-card elevation="2">
      <v-card-title>AQI Comparison</v-card-title>
      <line-chart
        :chart-data="datacollection"
        :options="chartOptions"
      ></line-chart>
    </v-card>
  </v-container>
</template>

and add the chart options data in your script alongside datacollection variable. just like this.

<script>
import LineChart from "./LineChart.js";

export default {
  name: "AQIChartComponent",
  components: {
    LineChart,
  },
  data() {
    return {
      datacollection: {
        labels: [
          "week 1",
          "week 2",
          "week 3",
          "week 4",
          "week 5",
          "week 6",
          "week 7",
          "week 8",
          "week 9",
          "week 10",
        ],
        datasets: [
          {
            data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false,
          },
          {
            data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
            label: "Asia",
            borderColor: "#8e5ea2",
            fill: false,
          },
          {
            data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
            label: "Europe",
            borderColor: "#3cba9f",
            fill: false,
          },
          {
            data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
            label: "Latin America",
            borderColor: "#e8c3b9",
            fill: false,
          },
          {
            data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
            label: "North America",
            borderColor: "#c45850",
            fill: false,
          },
        ],
      },
      chartOptions: {
        responsive: true,
        legend: {
          display: false,
        },
        tooltips: {
          titleFontSize: 20,
          bodyFontSize: 25,
        },
        scales: {
          xAxes: [],
          yAxes: [
            {
              ticks: {
                beginAtZero: false,
              },
            },
          ],
        },
      },
    };
  },
};
</script>

Upvotes: 2

Mic Fung
Mic Fung

Reputation: 5692

From the error, I think it is a incompatible problem between vue-chartjs and chart.js

vue-chartjs haven't updated since Dec 2020.

Can you try to downgrade the chart.js to 2.9.4? I think it will solve the constructor problem.

"chart.js": "2.9.4",
"vue-chartjs": "3.5.1",

I created a tiny sample, which is using the code you provided, in codesandbox FYR.

https://codesandbox.io/s/distracted-galileo-r3lec?file=/package.json:378-401

P.S.

If you would like to have a update chart library, you can check out apex charts https://github.com/apexcharts/vue-apexcharts

Upvotes: 6

Related Questions