HTML <canvas> Element & Chart.js

Chart. js is a community maintained open-source library (it’s available on GitHub) that helps you easily visualize data using JavaScript.

It’s similar to Chartist and Google Charts. It supports 8 different chart types (including bars, lines, & pies), and they’re all responsive.

example:

• Scatter
• Line
• Bar
• Radar
• Pie and Doughnut
• Polar Area
• Bubble

---

How to Use Chart.js?

Chart.js is easy to use.

>> First, add a link to the providing CDN (Content Delivery Network)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"> </script>

OR , download Chart.js. Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in

>> Then, add a <canvas> to where you want to draw the chart:

The <canvas> element has only two attributes, width and height. The canvas element must have a unique id.