Get started with Chart.js CDN

MIT licensed

Chart.js: Open-source library for creating dynamic, responsive web data visualizations.

Tags:
  • charts

Stable version

Copied!

How to start using Chart.js CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with Chart.js CDN - cdnhub.io</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.min.js"></script>
</head>
<body>
    <div style="width: 800px; height: 400px; margin: 0 auto;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
        const data = [12, 19, 3, 5, 2, 3, 7];

        const config = {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: 'Sales',
                    data,
                    backgroundColor: 'rgba(75, 192, 193, 0.2)',
                    borderColor: 'rgba(75, 192, 193, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };

        new Chart(document.getElementById('myChart'), config);
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions