Chart.js Installation

Chart.js provides various installation methods to suit different development scenarios:

  • NPM/Yarn - Suitable for projects using build tools
  • CDN - Suitable for rapid prototyping and learning
  • GitHub - Suitable for developers needing the latest features or contributing

1. Install via NPM/Yarn

NPM (Node Package Manager) is a package manager for JavaScript, suitable for modern front-end project development.

Installation Steps

# 使用 npm 安装
npm install chart.js

# 或者使用 yarn 安装
yarn add chart.js

Importing into a Project

After installation, you can import Chart.js into your JavaScript file as follows:

Example

// Import the entire Chart.js library
import Chart from 'chart.js/auto';

// Or import specific chart types on demand (to reduce bundle size)
import { Line } from 'chart.js';

Version Management

To install a specific version of Chart.js, you can specify the version number:

npm install [email protected]

2. Use via CDN

CDN (Content Delivery Network) is a way to load library files directly over the network, suitable for rapid prototyping.

Recommended CDN URLs

<!-- 字节跳动 CDN（国内推荐） -->
<script src="&lt.html"https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>"></script>

<!-- Staticfile CDN（国内备选） -->
<script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.min.js"></script>

<!-- cdnjs CDN（海外推荐） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

Example

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js CDN Example</title>
    <!-- Import Chart.js -->
   <script src="<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;">
        <canvas id="myChart"></canvas>
    </div>

    <script>
// Get the canvas element
        const ctx = document.getElementById('myChart').getContext('2d');
       
// Create a chart
        const myChart = new Chart(ctx, {
type: 'bar', // Chart type
            data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [{
label: 'Monthly Sales',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(54, 162, 235, 0.5)'
                }]
            },
            options: {
responsive: true, // Responsive design
                scales: {
                    y: {
beginAtZero: true // y-axis starts from 0
                    }
                }
            }
        });
    </script>
</body>
</html>

Try it »

This series will use domestic CDN URLs for testing, as in the example below:

Example

<script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>

3. Obtain from GitHub

GitHub is a hosting platform for open-source projects, suitable for developers who need the latest features or want to contribute to projects.

How to Get

Clone the repository (requires Git):

git clone https://github.com/chartjs/Chart.js.git

Download ZIP File

Build the Project

After downloading, you can build your own version of Chart.js:

cd Chart.js
npm install
npm run build

After the build is complete, you can find the generated files in the dist/ directory.

Comparison of Installation Methods

Method Advantages Disadvantages Applicable Scenarios
NPM/Yarn Convenient version management, suitable for modern front-end projects Requires build tools Formal project development
CDN Simple and fast, no build required Depends on network, version updates not timely Rapid prototyping, learning
GitHub Get the latest code, customizable Requires manual build Advanced development, contributing code
Other Extensions