In this article, we will see how to create Area charts using CSS. There are many Libraries available, which can help us to build area charts, although, here, we will be using pure HTML and CSS to create an Area Chart.
An Area Chart is a graphical representation of quantitative data where multiple data items are combined to form a graph.
The above diagram represents the basic area chart in the XY-plane with 4 data items. Now, we will create a similar area chart with the below approach.
Steps to create an Area Chart:
- To create an area chart, we will use <div> tag & put the class name as “area_chart”. After that, we will apply CSS using that class selector on this div to make it like XY Plane. In the example code snippet, we have used a <div> tag with 4 <div/> children
<div class="area_chart"> <div></div> <div></div> <div></div> <div></div> </div>
- Every div inside is a data item. We will be adding the shape to every Item. For this, we can use custom properties as they can be easily accessed within CSS. Here, –top_left is the point on the left top, and –top_right is the point on the right top of the Item shape.
<div class="area_chart"> <div style="--top_left: 0.9; --top_right: 0.6;"></div> <div style="--top_left: 0.6; --top_right: 0.4;"></div> <div style="--top_left: 0.4; --top_right: 0.5;"></div> <div style="--top_left: 0.5; --top_right: 0.2;"></div> </div>
- Now, we can shape the parent div with the area_chart class, by implementing the different styles in the class. We are keeping the width: 700px & height: 400px.
.area_chart {
width: 700px;
height:400px;
display: flex;
}- Finally, we will clip each and every item. The clip-path property is used to clip the particular section of the image or specific shape such that part of the shape inside the section is shown and part of the shape outside the section is not shown.
clip-path: polygon( 0% calc(100% * var(--top_left)), 100% calc(100% * var(--top_right)), 100% 100%, 0% 100% );
- Here, by using the clip-path property, with p1 = (0,100% * –top_left ), p2 = (0,100% * –top_right), p3 = (100,100), p4= (0,100) where p1,p2,p3,p4 are 4 points of the shape, to clip the data items into proper shape.
This is an example of a data item in the graph:
Note: The custom variables –top_left and –top_right are important to get the length of the data item in the graph. So, we can apply the same style with different dimensions for different data items.
Example 1: This example describes the basic implementation of the above steps mentioned to create the Area Chart.
<!DOCTYPE html> <html>
<head>
<title>Area Chart</title>
<style>
.area_chart {
width: 700px;
height: 400px;
display: flex;
}
.area_chart>* {
flex-grow: 1;
border: 0.1px solid;
background: rgba(118, 255, 30, .75);
clip-path: polygon(0% calc(100% * var(--top_left)),
100% calc(100% * var(--top_right)),
100% 100%,
0% 100%);
}
</style>
</head>
<body>
<h1 style="color:green">GeekForGeeks</h1>
<h3>How to create an Area Chart using CSS ?</h3>
<div class="area_chart">
<div style="--top_left: 0.9; --top_right: 0.6;"></div>
<div style="--top_left: 0.6; --top_right: 0.4;"></div>
<div style="--top_left: 0.4; --top_right: 0.5;"></div>
<div style="--top_left: 0.5; --top_right: 0.2;"></div>
</div>
</body>
</html>
|
Output:
Example 2: This is the more elegant look of the above chart. In this, we are using paragraph tag <p> to represent the data items and also we are adding some space between the data items using justify-content. Adding 20% as width and rounding the data items with border-radius as shown in the output.
<!DOCTYPE html> <html>
<head>
<title>Area Chart </title>
<style>
.area_chart {
width: 700px;
height: 400px;
border-bottom: 6px solid rgba(118, 255, 30, .75);
display: flex;
justify-content: space-between;
}
.area_chart>* {
width: 20%;
border-radius: 50px;
background: rgba(118, 255, 30, .75);
clip-path: polygon(0% calc(100% * var(--top_left)),
100% calc(100% * var(--top_right)),
100% 100%,
0% 100%);
}
p {
margin: 0;
}
</style>
</head>
<body>
<h1 style="color:green">GeekForGeeks</h1>
<h3>How to create an Area Chart using CSS ?</h3>
<div class="area_chart">
<p style="--top_left: 0.9; --top_right: 0.6;"></p>
<p style="--top_left: 0.6; --top_right: 0.4;"></p>
<p style="--top_left: 0.4; --top_right: 0.5;"></p>
<p style="--top_left: 0.5; --top_right: 0.2;"></p>
</div>
</body>
</html>
|
Output: