DEV Community

Cover image for Getting Started with Chart.js – Make Beautiful Charts with Just a Few Lines of Code
gauharnawab
gauharnawab

Posted on

Getting Started with Chart.js – Make Beautiful Charts with Just a Few Lines of Code

#webdev #javascript #opensource #learning

Hey there, aspiring developers! 👋

Ever looked at fancy websites with colorful charts and thought, "How do they do that?"
Well, today you're going to learn how to make your very own bar chart using a cool and beginner-friendly library called Chart.js!

What is Chart.js?

Chart.js is a simple JavaScript library that helps you create awesome and interactive charts (like bar charts, line charts, pie charts, and more!) using just a little bit of code.

It's super handy for:

  • Showing data in a visual way 📊
  • Making dashboards and reports prettier 🌈
  • Learning how JavaScript and data visualization work together 🤓

Step-by-Step: Let’s Build a Bar Chart

_1️⃣ Include Chart.js in Your HTML

You can add Chart.js to your project using a CDN (Content Delivery Network) — no need to download anything!_

Just add this line inside the

of your HTML:
<head> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head>
Enter fullscreen mode Exit fullscreen mode

_2️⃣ Add a Element for the Chart
This is like a blank canvas where your chart will be painted! _

<body> <h2>My First Bar Chart</h2> <canvas id="myChart" width="400" height="200"></canvas> </body>
Enter fullscreen mode Exit fullscreen mode

3️⃣ Style It Using Basic CSS
Let’s add some simple styles to center the chart and make it look nice:

<style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f9f9f9; padding: 20px; } canvas { background: #ffffff; border: 1px solid #ddd; padding: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } </style>
Enter fullscreen mode Exit fullscreen mode

4️⃣ Add JavaScript to Create a Basic Bar Chart
Now comes the fun part — using JavaScript to make the chart appear!

<script> const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', // Type of chart data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // X-axis labels datasets: [{ label: 'Votes', data: [12, 19, 3, 5, 2, 3], // Y-axis values backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)' ], borderColor: 'rgba(0, 0, 0, 0.1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true // Start Y-axis from 0 } } } }); </script>
Enter fullscreen mode Exit fullscreen mode

_Tips for Beginners:
_

  • Don’t be afraid to experiment! Try changing the colors or the data values.
  • If something breaks, check your browser console (right-click > Inspect > Console tab).
  • Want to try other charts? Just change type: 'bar' to 'line', 'pie', or 'doughnut'!

Top comments (0)