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

  
  
  
  


  
Website Traffic Overview
  

  

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