Charts are everywhere. Whether you're building a dashboard or just want to show off how many coffee cups you've had this week, visualizing data makes everything easier to digest. One of the most popular and dead-simple libraries for this kind of task is Chart.js.

I personally use it on my blog for analytics and on the typing test portion as well. It's easy to implement and can handle large amounts of data without a problem.

In this guide, I’ll walk you through rendering a bar chart using Chart.js with no fluff. Just straight-up code and a little context.

Step 1: Include Chart.js

You can install it via npm:

npm install chart.js

Or toss it into your HTML from a CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Step 2: Set Up the HTML

You’ll need a <canvas> element where the chart will be rendered.

<canvas id="myBarChart" width="400" height="200"></canvas>

Step 3: Write the JS

Here’s the meat of it:

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

const myBarChart = new Chart(ctx, {
  type: 'bar', // This defines the chart type
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], // These are the x-axis labels
    datasets: [{
      label: 'Cups of Coffee', // Legend label
      data: [2, 3, 1, 5, 4], // Values for each bar
      backgroundColor: 'rgba(75, 192, 192, 0.6)', // Fill color of bars
      borderColor: 'rgba(75, 192, 192, 1)', // Border color of bars
      borderWidth: 1 // Border thickness
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true // Starts the y-axis at zero instead of auto-scaling
      }
    }
  }
});

Breakdown of the Key Properties

• type: Specifies the chart type. In this case, it's a bar chart.
• data.labels: An array of category labels for the x-axis.
• data.datasets: An array of datasets. Each dataset is a series of values and visual configs.
  • label: Name that shows up in the chart legend.
  • data: Array of numbers to be plotted.
  • backgroundColor: Fill color of each bar.
  • borderColor: Border color of each bar.
  • borderWidth: Thickness of the border line.
• options.scales.y.beginAtZero: Forces the y-axis to start at zero for visual clarity.

That’s it

No build tools. No complex configuration. And no surprises. Chart.js is friendly, flexible, and perfect for quick data visualizations that don’t require a PhD in D3.js.

Now go impress your boss or just yourself.