📊 Chart.js Integration

Professional charting library integration using lifecycle hooks

Example 1: Dynamic Line Chart

Use Case: Initialize Chart.js on mount, update on data changes, and cleanup on unmount.

Library: Chart.js

// Lifecycle hooks for Chart.js
methods: {
  initLineChart() {
    const ctx = document.getElementById('lineChart').getContext('2d');
    this.lineChart = new Chart(ctx, {
      type: 'line',
      data: this.lineChartData,
      options: { /* ... */ }
    });
  },
  updateLineChart() {
    if (this.lineChart) {
      // Convert reactive arrays to plain arrays
      this.lineChart.data.labels = [...this.lineLabels];
      this.lineChart.data.datasets[0].data = [...this.lineDataPoints];
      this.lineChart.update();
    }
  },
  destroyLineChart() {
    if (this.lineChart) {
      this.lineChart.destroy();
      this.lineChart = null;
    }
  }
}

Example 2: Bar Chart with Statistics

Use Case: Display computed statistics alongside a dynamic bar chart.

{{ totalSales }}
Total Sales
{{ averageSales }}
Average
{{ maxSales }}
Maximum
// Computed properties work with charts
computed: {
  totalSales() {
    return this.salesData.reduce((a, b) => a + b, 0);
  },
  averageSales() {
    return Math.round(this.totalSales / this.salesData.length);
  }
}

Example 3: Responsive Doughnut Chart

Use Case: Category distribution visualization with automatic updates.

// Responsive chart configuration
options: {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      position: 'bottom'
    }
  }
}

📦 Installation

Include Chart.js via CDN or npm:

<!-- Via CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

// Via npm
npm install chart.js
← Back to Examples