”;
Prerequisites
Before installing and start using Chart.js library, you need to have the basic understanding of the following programs −
-
Basics of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS)
-
Basic understanding of JavaScript especially Object-Oriented Programming (OOP) concepts and Arrays.
Installation
Before start working with Chart.js, we need to first install it. Below are the couple of ways you can use to install Chart.js −
Method 1 − Using NPM
You can use NPM to install Chart.js. Copy and paste the following command to download Chart.js in your project −
npm install chart.js --save
Method 2 − Using a CDN
Using a CDN to install and use Chart.js in your project is one of the fastest and easiest way. First grab the latest CDN link from CDN website: https://cdnjs.com . Now, copy the URL that has Chart.min.js at the end.
Method 3 − Using GitHub
You can use GitHub to download the latest version of the chart.js library. The link https://github.com helps to get the Chart.js library.
Method 4 − Using jsDelivr
You can also use jsDelivr to download the latest version of the chart.js library. The link https://www.jsdelivr.com/ helps to get the Chart.js built files.
Setup Project with Chart.js
Using CDN − To set up your project with chart.js, include a script tag in your HTML that links to the chart.js CDN. In other words, load the CDN into the body section as follows −
<html> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script> </body> </html>
Using jsDelivr − You can follow the below steps to setup chart.js for your project using jsDelivr −
-
Step 1 − Create a file and save the name with the “js” keyword. For example: firstchart.js.
-
Step 2 − Now download chart.js library from the jsDelivr. The downloaded library saves in the filename.js file. Copy and paste the link https://cdn.jsdelivr.net in the .js file.
-
Step 3 − Next, create a HTML file and write the code. Put the script tag in the <body> </body> section.
-
Step 4 − Last, add this file into the script tag with the path <script src = “path/folder/firstchart.js”></script>
”;