Chapter 64: Plot Chart.js
1. What is Chart.js actually? (Clear definition first)
Chart.js is one of the most popular, free, open-source JavaScript libraries for creating beautiful, interactive charts and graphs directly in web pages using HTML <canvas>.
In simple words:
- You give it data (numbers, labels, categories)
- You tell it what kind of chart you want (line, bar, pie, doughnut, radar, polar area, bubble, scatter…)
- Chart.js does all the hard work: draws axes, grids, legends, tooltips, animations, colors, hover effects…
- Everything happens inside a normal <canvas> tag — no extra plugins needed for basic use
Why students and freshers love Chart.js so much (especially in India):
- Very easy to learn — basic chart in 5–10 lines of code
- Looks modern & professional out of the box
- Fully interactive (hover shows exact values, click legends to hide/show datasets, responsive on mobile)
- No backend/server needed — pure client-side JavaScript
- Free forever (MIT license)
- Huge community — tons of examples, Stack Overflow answers, YouTube tutorials
- Very common in college projects, resume portfolios, placement interviews, startup dashboards
2. Chart.js vs Other Libraries (Quick Comparison – Exam Favorite)
| Library | Ease for beginners | Interactive by default | Looks modern | File size | Best for |
|---|---|---|---|---|---|
| Chart.js | ★★★★★ | Yes | Yes | ~60 KB | Students, dashboards, quick charts |
| D3.js | ★★☆☆☆ | Yes (but you build it) | Yes | ~300 KB | Very custom / complex visualizations |
| Plotly.js | ★★★★☆ | Yes | Yes | ~3 MB | Scientific / 3D / maps |
| Highcharts | ★★★★☆ | Yes | Yes | ~300 KB | Enterprise (paid for commercial) |
| Matplotlib | ★★★☆☆ (Python) | No (static) | Medium | — | Data science notebooks |
→ For most student projects & web pages → Chart.js wins.
3. Your First Chart.js Plot – Hello World Bar Chart (Copy-Paste & Run)
Create a file called chartjs-hello.html and paste this complete code:
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 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chart.js – Hello World Bar Chart</title> <style> body { background: #f0f4f8; font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } canvas { max-width: 700px; width: 100%; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } h1 { color: #2c3e50; margin-bottom: 10px; } </style> </head> <body> <h1>My First Chart.js Bar Chart</h1> <p>Fruit sales this month (hover to see values)</p> <!-- This is where the chart will appear --> <canvas id="myChart"></canvas> <!-- Load Chart.js from CDN (no installation needed) --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // 1. Get the canvas element const ctx = document.getElementById('myChart').getContext('2d'); // 2. Create the chart new Chart(ctx, { type: 'bar', // bar, line, pie, doughnut, radar, polarArea, bubble, scatter... data: { labels: ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes'], // x-axis labels datasets: [{ label: 'Sales (in dozens)', // legend name data: [45, 32, 28, 51, 19], // y-axis values backgroundColor: [ // colors for each bar 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 206, 86, 0.7)', 'rgba(75, 192, 192, 0.7)', 'rgba(153, 102, 255, 0.7)' ], borderColor: [ // border colors 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 2 }] }, options: { responsive: true, plugins: { legend: { position: 'top' }, title: { display: true, text: 'Fruit Sales This Month', font: { size: 22 } } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Sales (dozens)' } } } } }); </script> </body> </html> |
What you see when you open it:
- Beautiful colorful bar chart
- Hover on any bar → tooltip shows exact value
- Responsive (resize window → chart adjusts)
- Title, legend, axes labels — looks very professional
This is your first real Chart.js plot — congratulations! 🎉
4. Step-by-Step: How We Made This Bar Chart (Blackboard Style)
- Include Chart.js<script src=”https://cdn.jsdelivr.net/npm/chart.js”></script> → No installation needed — loads from CDN
- Create canvas element<canvas id=”myChart”></canvas> → Chart.js will draw inside it
- Get contextconst ctx = document.getElementById(‘myChart’).getContext(‘2d’);
- Create chartnew Chart(ctx, { type: ‘bar’, data: {…}, options: {…} });
- Datalabels = x-axis categories datasets = actual data series (you can have multiple)
- Options Title, legend position, axis titles, responsive behavior
5. More Very Useful Chart.js Examples (Copy-Paste & Try)
A. Line Chart (Change over Time)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Website Visitors', data: [1200, 1900, 3000, 2800, 4500, 5200], borderColor: '#3498db', backgroundColor: 'rgba(52, 152, 219, 0.2)', tension: 0.4, // smooth curve fill: true }] }, options: { responsive: true, plugins: { title: { display: true, text: 'Visitor Growth' } } } }); |
B. Pie / Doughnut Chart
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
new Chart(ctx, { type: 'doughnut', data: { labels: ['Rent', 'Food', 'Transport', 'Savings'], datasets: [{ data: [12000, 8000, 3000, 5000], backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0'] }] }, options: { responsive: true, plugins: { title: { display: true, text: 'Monthly Budget' } } } }); |
C. Mixed Chart (Bar + Line)
JavaScript
|
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 |
new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr'], datasets: [ { type: 'bar', label: 'Sales', data: [120, 190, 300, 280], backgroundColor: '#36a2eb' }, { type: 'line', label: 'Profit %', data: [5, 12, 18, 15], borderColor: '#ff6384', fill: false, yAxisID: 'y1' // second y-axis } ] }, options: { responsive: true, scales: { y: { position: 'left' }, y1: { position: 'right' } } } }); |
6. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Start with CDN — no installation needed for learning/projects
- Always set responsive: true in options — chart auto-adjusts on mobile
- Common mistake #1: Wrong chart type → use ‘bar’, ‘line’, ‘pie’, ‘doughnut’, ‘radar’, ‘polarArea’, ‘bubble’, ‘scatter’
- Common mistake #2: Forget to import Chart.js → “Chart is not defined” error
- Pro tip: Use borderSkipped: false in bar charts for full-height bars
- Pro tip 2: Add hover effects — Chart.js does it automatically
Understood how to plot with Chart.js now? Chart.js is currently one of the easiest & most impressive charting libraries students can learn — interactive, beautiful, lightweight, and looks very professional in projects & interviews.
Tell me honestly — what do you want next?
- Full dashboard with 4 different charts?
- Animated chart (growing bars on load)?
- Chart with tooltips + custom colors?
- How to make Chart.js work with real API data?
- Or 20-question Chart.js quiz?
Just say — we can build any chart together step by step! 🚀
