CDN link

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js">
</script> 

Chart.js Area Chart

In this article, we will learn to implement an Area Chart using the Chart JS CDN library.

A Chart.js Area Chart is the type of chart that is mainly used to represent the data points over the continuous axis by filling the area or portion within the data line and the axis by making it a colored portion. The Area Chart is mainly used to display the magnitude and the distribution of the data values. Using this Area Chart we can easily understand the complex patterns in the dataset easily.

Similar Reads

Area Chart Components

Filling modes: There are various modes that are facilitated by the Area Chart, in order to visualize the Chart appropriately. Multiple colors: Multiple Colors are mainly used while filling from one dataset to another, which helps to distinguish the various datasets in the Chart. Configuration: This component facilitates the various options, which helps to filter out the draw time, along with filling the propagation while the target dataset is hidden.  Propagate: It accepts the Boolean value & the default value is true. If the fill value of hidden dataset targets is set to “true,” then the filled area will be expanded recursively to the visible target....

Approach

In the HTML design, use the tag to show the line graph. In the script part of the code, we need to initialize the ChartJS object by setting the type, label, data, and background color, and more options properties of the library. Set other required options inside each property like datasets, labels, borderColor,fill, scales, and others as per the need of the programmer....

CDN link

...

Syntax

new Chart($("#ID"), { type: 'line' data: { ... }, options: { ... } });...