How to Generate Dynamic Charts in the Browser Using Chart.js and Vanilla JavaScript

Visualizing data in the browser doesn’t have to be complicated. Chart.js is a lightweight and flexible JavaScript library that lets you create beautiful and interactive charts without any external frameworks. In this tutorial, we'll walk through how to use Chart.js with plain HTML and JavaScript to build dynamic data visualizations.

1. Why Use Chart.js?

Chart.js supports various chart types—line, bar, pie, radar, and more. It’s responsive, accessible, and customizable, making it perfect for dashboards, reports, and data-heavy apps.

2. Setting Up the HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <h2>Website Traffic Overview</h2>
  <canvas id="trafficChart" width="600" height="400"></canvas>

  <script src="chart-setup.js"></script>
</body>
</html>

3. Writing the Chart.js Logic

Create a file named chart-setup.js and add the following code:

const ctx = document.getElementById('trafficChart').getContext('2d');

const trafficChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    datasets: [{
      label: 'Visitors',
      data: [120, 190, 300, 500, 200, 300, 400],
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.3,
      fill: true,
      pointRadius: 4
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      title: {
        display: true,
        text: 'Weekly Website Traffic'
      }
    }
  }
});

4. Making It Dynamic

You can later fetch real-time data from an API using fetch() and update the chart using Chart.js’s update() method.

5. Bonus: Adding Tooltips and Interactions

Chart.js includes tooltips by default. You can configure them easily:

options: {
  plugins: {
    tooltip: {
      enabled: true,
      callbacks: {
        label: function(context) {
          return `${context.label}: ${context.parsed.y} visitors`;
        }
      }
    }
  }
}

Conclusion

Chart.js is perfect for adding beautiful, animated charts to your projects with minimal code. With dynamic data loading and interaction support, it brings dashboards to life without needing a heavy framework.

If this post helped you, consider supporting me here: buymeacoffee.com/hexshift

HexShift @hexshift