vue-chartjs in laravel,vuejs using API Axios

Viewed 1521

I am trying to show the all the companies in the Chart in Dashboard.vue regarding years but it does not show anything and I am trying since many days if someone could help me it will be so kind of him.

My API/Route is :

Route::apiResources(['company'=>'API\CompanyController']);

EmployeeController code is :

public function index(){return Employee::all();}

Code in Chart.vue is:

<script>
import { Line } from "vue-chartjs";
export default {
  extends: Line,
  data() {
    return {
      url: "api/company",
      years: [],
      labels: [],

      data: ""
    };
  },

  methods: {
    getProducts() {
      axios.get(this.url).then(response => {
        this.data = response.data;
        if (this.data) {
          this.data.forEach(element => {
            this.years.push(element.created_at);
            this.labels.push(element.name);

          });
          this.renderChart(
            {
              labels: this.years,
              datasets: [
                {
                  label: "list of Companies ",
                  backgroundColor: "#f87979",
                  data: this.name
                }
              ]
            },
            { responsive: true, maintainAspectRatio: false }
          );
        } else {
          console.log("NO DATA");
        }
      });
    }
  },
  mounted() {
    this.getProducts();
  }
};
</script>

Code in app.js is :

Vue.component('chart-component', require('./components/Chart.vue'));

code in Dashboard is :

<template>
  <div class="container">

    <chart-component></chart-component>
  </div>
</template>
1 Answers

I solved it the problem was that I did not put the .default so I amend it like below:

Vue.component('chart-component', require('./components/Chart.vue').default);
Related