Chart.js Tutorial
Selected Reading
- Chart.js - Discussion
- Chart.js - Useful Resources
- Chart.js - Quick Guide
- Chart.js - Radial Axis
- Chart.js - Category Axis
- Chart.js - Cartesian Axis
- Chart.js - Mixed Chart
- Chart.js - Scatter Chart
- Chart.js - Bubble Chart
- Chart.js - Polar Area Chart
- Chart.js - Pie Chart
- Chart.js - Doughnut Chart
- Chart.js - Radar Chart
- Chart.js - Bar Chart
- Chart.js - Line Chart
- Chart.js - Tooltip
- Chart.js - Animation
- Chart.js - Title
- Chart.js - Legend
- Chart.js - Interactions
- Chart.js - Options
- Chart.js - Color
- Chart.js - Basics
- Chart.js - Syntax
- Chart.js - Installation
- Chart.js - Introduction
- Chart.js - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Chart.js - Installation
Chart.js - Installation
Prerequisites
Before instalpng and start using Chart.js pbrary, 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 pnk from CDN website: . 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 pbrary. The pnk helps to get the Chart.js pbrary.
Method 4 − Using jsDepvr
You can also use jsDepvr to download the latest version of the chart.js pbrary. The pnk 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 pnks 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/pbs/Chart.js/3.1.1/chart.min.js"></script> </body> </html>
Using jsDepvr − You can follow the below steps to setup chart.js for your project using jsDepvr −
Step 1 − Create a file and save the name with the "js" keyword. For example: firstchart.js.
Step 2 − Now download chart.js pbrary from the jsDepvr. The downloaded pbrary saves in the filename.js file. Copy and paste the pnk 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>