Charts.js Installation Guide

Chart.js is a powerful JavaScript library that enables developers to create interactive and visually appealing charts for web applications. It allows developers to create dynamic charts in their web applications without requiring extensive coding or knowledge of complex data visualization techniques.

Perquisites:

 You need to have the following dependencies to install Chart.js:

• Git
• Node.js and NPM.

Installation of Chart.js:

There are 4 methods through which you can install Chart.js in your Project:

Method 1: Using NPM

Step 1: Check Node.js and NPM versions. Open your terminal or command prompt and type the following commands to check if Node.js and NPM are installed:

node -v
npm -v

Step 2: Install Chart.js, Run the following command to install Chart.js globally using NPM:

npm install -g chart.js

Note: -g means we can install it globally.

If you want to install a specific version, you can use the following command:

npm install -g [email protected]

Step 3: To ensure that Chart.js is installed successfully, check the version by running:

chartjs -v

You should see output similar to the following:

Chart.js: 4.4.1

After getting this output we know that Chart.js was successfully installed in our system. Now we can use it everywhere.

Method 2: Using a CDN

Step 1: Visit website: https://cdnjs.com . and copy the URL that has Chart.min.js at the end. CDN link:

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js

Step 2: Now paste the CDN link inside "script" tag inside "head" tag in your html file. Now you can create charts.

Method 3: Using jsDelivr

Step 1: You can also use jsDelivr to download the latest version of the chart.js library. Visit website https://www.jsdelivr.com/ and search for Chartjs you will se chartjs click on it. you will be redirected to another page.

Step 2: Then you will see a script, copy that script. Script:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

Step 3: Now paste that script inside "head" tag of your HTML file. Now you can create charts.

Method 4: Using GitHub

Step 1: Visit this link https://github.com/chartjs/Chart.js/releases?page=2 and scroll down and look for "V 3.9.0" and once you find it, click on "chart.js-3.9.0.tgz" under Assets, it will automatically start downloading.

Step 2: Now, extract the downloaded file "chart.js-3.9.0" , A "package" named folder will appear, open package->dist, you will see a javascript file named "chart.min" copy that file and paste into your project folder alongside your html file, like below image.

Step 3: Include a script inside head tag of your html file with src of path of your "chat.min.js" file.

  <script src="./chart.min.js"></script>

Step 4: Now you are ready to create charts.