How can I fetch data for charts in Vue.js using Chart.js?

How can I fetch data for charts in Vue.js using Chart.js?

You can use the Axios library to fetch data from an API and then pass that data to your Chart.js component.

Can you show me a code example of how to do that?

Sure! Here's a simple example:

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import axios from 'axios';
import { Chart } from 'chart.js';

export default {
  data() {
    return {
      chartData: null,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await axios.get('https://api.example.com/data');
      this.chartData = response.data;
      this.renderChart();
    },
    renderChart() {
      const ctx = document.getElementById('myChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: this.chartData.labels,
          datasets: [{
            label: 'My Dataset',
            data: this.chartData.values,
          }],
        },
      });
    },
  },
};

This will fetch data and render a bar chart.

What if I want to update the chart when new data is fetched?

You can call the renderChart method again after fetching new data to update the chart with the latest information.