Chapter 38: Chart.js
Step 1: What Exactly is Chart.js? (Very Simple & Clear Definition)
Chart.js is a free, open-source JavaScript library that makes it very easy to create beautiful, responsive, animated charts in web pages using the HTML <canvas> element.
Think of it like:
- Microsoft Excel charts + PowerPoint animations but much lighter, faster, more customizable, and completely free.
Key points that make Chart.js special (2026 reality):
- Extremely easy to learn — most people make their first chart in < 10 minutes
- Very small size (~60 KB minified + gzipped)
- Responsive by default — looks good on mobile, tablet, desktop
- Smooth animations — bars grow, lines draw themselves, pies fill up nicely
- 8 core chart types (with many variations): line, bar, pie/doughnut, polar area, radar, scatter/bubble, area, mixed
- Highly customizable — colors, tooltips, legends, axes, grid lines, plugins
- No dependencies — pure JavaScript + Canvas (no jQuery, no React required — but works great with them)
- MIT license — free for personal, commercial, open-source projects
Official website (still the best place): https://www.chartjs.org GitHub: https://github.com/chartjs/Chart.js
Step 2: Why Do People Love Chart.js in 2026?
- Beginner-friendly — much easier than D3.js, less opinionated than Plotly.js
- Lightweight — loads very fast even on slow 4G connections
- Beautiful defaults — charts look professional with almost no configuration
- Active community — huge number of examples, plugins, Stack Overflow answers
- Works everywhere — plain HTML, React, Vue, Angular, Svelte, Next.js, Nuxt, etc.
- No backend needed — perfect for static sites, dashboards, blogs, reports
Common places you see Chart.js today:
- Company internal dashboards
- Blog posts with stats
- E-commerce sales reports
- Sports websites (IPL, ISL stats)
- Fintech apps (UPI spending charts)
- Educational websites & personal portfolios
Step 3: Your First Chart.js Chart – Copy-Paste & Run (30 Seconds)
Create a file called chartjs-hello.html and paste this:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My First Chart.js Chart</title> <!-- Load Chart.js from CDN (latest version in 2026) --> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> <style> body { margin: 0; padding: 40px; background: #f8f9fa; font-family: Arial; text-align: center; } h1 { color: #4e73df; } #myChart { width: 90%; max-width: 1000px; height: 600px; margin: 40px auto; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } </style> </head> <body> <h1>My First Chart.js Chart – IPL 2025 Run Scorers</h1> <canvas id="myChart"></canvas> <script> // Get the canvas context const ctx = document.getElementById('myChart').getContext('2d'); // Create the chart new Chart(ctx, { type: 'bar', // bar, line, pie, doughnut, radar, polarArea, scatter, bubble data: { labels: ['Virat Kohli', 'Suryakumar Yadav', 'Travis Head', 'KL Rahul', 'Jos Buttler'], datasets: [{ label: 'IPL 2025 Runs', data: [741, 682, 658, 612, 589], backgroundColor: [ 'rgba(78, 115, 223, 0.7)', 'rgba(28, 200, 138, 0.7)', 'rgba(255, 99, 132, 0.7)', 'rgba(255, 159, 64, 0.7)', 'rgba(54, 162, 235, 0.7)' ], borderColor: [ 'rgba(78, 115, 223, 1)', 'rgba(28, 200, 138, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 159, 64, 1)', 'rgba(54, 162, 235, 1)' ], borderWidth: 2, borderRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top', labels: { font: { size: 16 } } }, title: { display: true, text: 'Top 5 Run Scorers – IPL 2025', font: { size: 24 }, padding: { top: 20, bottom: 30 } }, tooltip: { backgroundColor: '#2c3e50', titleFont: { size: 16 } } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Total Runs', font: { size: 16 } }, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { grid: { display: false } } } } }); </script> </body> </html> |
Open this file in your browser — you should see a beautiful, animated bar chart!
What you can do with it:
- Hover over bars → see exact runs + nice tooltip
- Resize window → chart auto-adjusts
- Click legend → hide/show bars (try it!)
Step 4: Quick Summary Table (Keep This Handy!)
| Chart Type | Best For | Example Data in 2026 | Code Snippet Starter |
|---|---|---|---|
| bar / horizontalBar | Comparisons, rankings | IPL run scorers, product sales | type: ‘bar’ |
| line / area | Time series, trends | Daily UPI transactions, stock prices | type: ‘line’ |
| pie / doughnut | Part-to-whole, percentages | Budget breakdown, market share | type: ‘pie’ |
| radar | Multi-attribute comparison | Player stats (batting, bowling, fielding) | type: ‘radar’ |
| scatter / bubble | Correlation, clusters | Height vs weight, sales vs profit | type: ‘scatter’ |
| polarArea | Circular comparison | Category performance | type: ‘polarArea’ |
Final Teacher Words (February 2026 Reality)
Chart.js = the easiest, lightest, most beautiful JavaScript library when you want quick, interactive, responsive charts with very little code.
- Start with bar/line/pie → look professional in minutes
- Add animations, tooltips, legends → users love the interactivity
- Need complex stats or 3D? → move to Plotly.js or D3.js later
- Want it in React/Vue/Next.js? → Chart.js has official wrappers
In Hyderabad 2026 Chart.js is still everywhere:
- Startup dashboards
- Blog posts with stats
- E-commerce reports
- Sports websites (IPL, ISL)
- College projects & portfolios
Got the big picture now? 🔥
Questions?
- Want a live updating UPI transaction line chart?
- Full doughnut chart for budget example?
- How to use Chart.js in React?
- Difference Chart.js vs Plotly.js vs ApexCharts?
Just tell me — next class is ready! 🚀
