Getting Started with Chart.js

What is Chart.js?

Chart.js is a JavaScript library for rendering charts. It supports bar charts, line charts, pie charts, and more — all drawn on a canvas element.

Loading via CDN

Just add this one line to your HTML.

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

Rendering a Chart

Add a <canvas> element as the render target.

<canvas id="myChart"></canvas>

Then create a Chart instance in JavaScript.

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: 'Study Hours',
      data: [12, 18, 15, 22, 30],
      backgroundColor: '#4e8ef7'
    }]
  },
  options: {
    scales: {
      y: { beginAtZero: true }
    }
  }
});

Live Example

Here's what the code above renders.

Summary

One CDN line, a canvas element, and a few lines of JS — that's all it takes to render a chart. It's surprisingly capable for how easy it is to set up.