Chart.js Area Chart

Last Updated : 28 Oct, 2023

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.

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 <canvas> 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

<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>

Syntax

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

Example 1: In this example, there is a simple representation of an Area Chart using Chart.js. The chart mainly represents the visual form of data with months of the year on the horizontal axis and the dataset of number values on the vertical axis. We have shaded the portion of the data line and horizontal axis with the color settings.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Area Chart Example 1 
      </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
          GeeksforGeeks 
      </h1> 
    <h3> 
          Chart JS Area Chart Example 1 
      </h3> 
    <canvas id="areaChart1" 
            width="700" 
            height="300"> 
    </canvas> 
    <script> 
        var ctx =  
                document.getElementById('areaChart1').getContext('2d'); 
        var myChart = new Chart(ctx, { 
            type: 'line', 
            data: { 
                labels: ['January', 
                         'February',  
                         'March',  
                         'April', 
                         'May'], 
                datasets: [{ 
                    label: 'Page Views', 
                    data: [5000, 7500, 8000, 6000, 9000], 
                    backgroundColor: 'rgba(75, 192, 192, 0.5)', 
                    borderColor: 'rgba(75, 192, 192, 1)', 
                    borderWidth: 2, 
                    fill: 'start' 
                }] 
            }, 
            options: { 
                scales: { 
                    y: { 
                        beginAtZero: true, 
                        title: { 
                            display: true, 
                            text: 'Page Views' 
                        } 
                    } 
                }, 
                layout: { 
                    padding: { 
                        left: 20, 
                        right: 20, 
                        top: 20, 
                        bottom: 20 
                    } 
                } 
            } 
        }); 
    </script> 
</body> 
  
</html>

Output:

Area1

Example 2: In the following example, we have used the Stacked Area Chart using Chart.js. We are mainly representing the data for the parameters of “Page Views”, “Unique Visitors”, and “Bounce Rate” for the months of Jan to May. The areas are filled with unique colors presenting each dataset over the stack. The y-axis is used to show the statistics and the legend is positioned at the top.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Area Chart Example 
      </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
          GeeksforGeeks 
      </h1> 
    <h3> 
          Chart JS Area Chart Example 2 
      </h3> 
    <canvas id="stackedArea"
            width="800"
            height="350"> 
      </canvas> 
    <script> 
        var ctx =  
                document.getElementById('stackedArea').getContext('2d'); 
        var myChart = new Chart(ctx, { 
            type: 'line', 
            data: { 
                labels: ['January',  
                         'February',  
                         'March',  
                         'April', 
                         'May'], 
                datasets: [ 
                    { 
                        label: 'Page Views', 
                        data: [5000, 7500, 4000, 6000, 2000], 
                        backgroundColor: 'rgba(75, 192, 192, 0.5)', 
                        borderColor: 'rgba(75, 192, 192, 1)', 
                        borderWidth: 2, 
                        fill: true, 
                    }, 
                    { 
                        label: 'Unique Visitors', 
                        data: [2500, 1000, 4000, 3000, 3500], 
                        backgroundColor: 'rgba(255, 99, 132, 0.5)', 
                        borderColor: 'rgba(255, 99, 132, 1)', 
                        borderWidth: 2, 
                        fill: true, 
                    }, 
                    { 
                        label: 'Bounce Rate', 
                        data: [10, 30, 5, 15, 20], 
                        backgroundColor: 'rgba(54, 162, 235, 0.5)', 
                        borderColor: 'rgba(54, 162, 235, 1)', 
                        borderWidth: 2, 
                        fill: true, 
                    } 
                ] 
            }, 
            options: { 
                scales: { 
                    y: { 
                        beginAtZero: true, 
                        stacked: true, 
                        title: { 
                            display: true, 
                            text: 'Statistics' 
                        } 
                    }, 
                    x: { 
                        stacked: true 
                    } 
                }, 
                layout: { 
                    padding: { 
                        left: 20, 
                        right: 20, 
                        top: 20, 
                        bottom: 20 
                    } 
                }, 
                plugins: { 
                    legend: { 
                        position: 'top', 
                    }, 
                } 
            } 
        }); 
    </script> 
</body> 
  
</html>