Line Chart

Code

const ctx = document.getElementById('lineChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: '2024',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.4,
      fill: true,
      pointRadius: 4,
      pointHoverRadius: 7,
      pointBackgroundColor: 'rgb(75, 192, 192)'
    }]
  },
  options: {
    scales: { y: { beginAtZero: true } }
  }
});

Explanation

Plots data points connected by a line; tension above 0 produces smooth Bézier curves and fill:true shades the area under the line. pointRadius and pointHoverRadius control marker size in normal and hover states. Multiple datasets in the data array render overlaid lines for comparison.

More Chart.js Snippets