Chart.js - Installation

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>

Advertisements