Prev Next

JavaScript Chart.js

Chart.js is a lightweight JavaScript library for creating responsive and interactive charts. It supports various chart types such as bar, line, pie, radar, and more, making it an excellent choice for data visualization.

Key Topics

Getting Started with Chart.js

To use Chart.js, include the library via a CDN link or install it using npm:

  • CDN: Add the Chart.js script in your HTML file: 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  • NPM: Install Chart.js using npm: npm install chart.js.

Creating Charts

Charts in Chart.js are created using a canvas element and the Chart constructor. You define chart data and configuration options to render the chart.

<canvas id="myChart" width="400" height="200"></canvas>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April'],
            datasets: [
                {
                    label: 'Sales',
                    data: [50, 70, 90, 100],
                    borderColor: 'blue',
                    backgroundColor: 'rgba(0, 0, 255, 0.1)',
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: 'Monthly Sales' }
            }
        }
    });
</script>

Explanation: This example creates a responsive line chart with sales data for four months. The chart includes a legend, axis labels, and a title.

Customizing Charts

Chart.js offers extensive customization options. You can modify colors, styles, tooltips, legends, and more through the options property.

<canvas id="customChart" width="400" height="200"></canvas>
<script>
    const ctx = document.getElementById('customChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green'],
            datasets: [
                {
                    label: 'Votes',
                    data: [12, 19, 3, 5],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: { position: 'bottom' },
                title: { display: true, text: 'Custom Bar Chart' }
            }
        }
    });
</script>

Explanation: This example customizes a bar chart with multiple colors for bars, a bottom legend, and a title.

Example: Responsive Bar Chart

This example demonstrates a fully responsive bar chart with tooltips and interactive legends:

<!DOCTYPE html>
<html>
    <head>
        <title>Chart.js Example</title>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>
    <body>
        <canvas id="responsiveChart" width="600" height="400"></canvas>
        <script>
            const ctx = document.getElementById('responsiveChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Apples', 'Oranges', 'Bananas', 'Grapes'],
                    datasets: [
                        {
                            label: 'Fruits Sold',
                            data: [20, 35, 40, 25],
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: true },
                        title: { display: true, text: 'Fruit Sales Data' }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        </script>
    </body>
</html>

Key Takeaways

  • Ease of Use: Chart.js simplifies creating responsive, interactive charts.
  • Customization: Extensive options allow for complete control over chart appearance and behavior.
  • Variety: Supports multiple chart types such as bar, line, pie, radar, and doughnut charts.
  • Responsiveness: Automatically adjusts charts to fit the container size.
Prev Next