ReadingNotes

Chart.js, Canvas

The Canavas element in html allows you to draw 2D graphics usig Javascript.
This element requires at least 2 attributes: width and height that specify the size of the canvas
Like other elements, you can access the width and height properties of the canvas element via its DOM properties
The canavas element unlike the img element, requires an closing tag.
Any content between the opening and closing tags is fallback content that will display only if the browser doesn’t support the canvas element.

Chart.js is very well suited for large datasets.
Chart.js renders chart elements on an HTML5 canvas unlike several other, mostly D3.js-based, charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree.
Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of built-in chart types, you can use additional community-maintained chart types . On top of that, it’s possible to combine several chart types into a mixed chart (essentially, blending multiple chart types into one on the same canvas).

Its important to have a closing tag on canavas because its important in order to include fallback content.
The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions.
Chart.js is a JavaScript library for creating charts and graphs on a web page. It allows developers to create charts such as bar charts, line charts, and pie charts. The library uses the HTML5 canvas element to draw the charts, and it is designed to be highly customizable and easy to use.
Radar Charts Pie Charts Doughnut Charts
the advantages are they are able to show each data category in a frequency distribution and display relative numbers or proportions of multiple categories.