Skip to content
Learni
View all tutorials
JavaScript

How to Create Charts with Chart.js in 2026

12 minBEGINNER
Chart.jsJavaScriptVisualisationGraphiques
Lire en français

Introduction

Chart.js is a lightweight, powerful open-source JavaScript library for creating interactive charts directly in the browser. In 2026, it's still the #1 choice for frontend developers thanks to its simplicity, performance (native canvas rendering), and support for over 8 chart types: lines, bars, pie, radar, and more. Unlike low-level D3.js, Chart.js is plug-and-play: think of it as Lego for data, where you assemble datasets and options in just a few lines.

Why use it? For analytics dashboards, financial reports, or scientific visualizations without a heavy backend. This beginner tutorial takes you from the basics (a simple line chart) to advanced options (animations, responsive tooltips). By the end, you'll know how to build a complete dashboard. Estimated time: 15 minutes for your first working chart. All code is copy-pasteable and live-testable on CodePen.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript (beginner level).
  • A code editor like VS Code.
  • A modern browser (Chrome, Firefox).
  • No npm installation needed: we use the CDN for instant setup.

Basic HTML Structure with CDN

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>First Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
</head>
<body>
  <div style="width: 80%; margin: 0 auto;">
    <canvas id="myChart" width="400" height="200"></canvas>
  </div>
  <script>
    // Chart code will be added in the following steps
  </script>
</body>
</html>

This HTML file loads Chart.js via CDN (stable 4.4.3 version in 2026). The canvas is the key element: it's the drawing area. Inline styles for quick centering; don't forget the viewport meta tag for mobile responsiveness.

First Chart: Line Chart

Let's start with a simple line chart, perfect for showing trends over time (e.g., monthly sales). Chart.js uses a config object with type, data (labels + datasets), and options. Copy the script into the