Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Area Chart using CSS
Overview
An area cart is used to represent the data set into the graphical form. By using the HTML and CSS we can create an area chart. So for this we will create two custom variables as start and end. The custom variable can be created using this symbol “--” and following up with a variable name. For example, creating the variable like: –width, --height and –start.
Algorithm
Step 1 − Create a HTML file and open that file in a text editor. Add the HTML boilerplate to the HTML file.
Step 2 − Now create a parent div container with a class name as a chart.
<div class="chart"></div>
Step 3 − Create a ul tag to create the chart list items.
<ul class="areaChart"></ul>
Step 4 − Now create the bars of chart using the li tag
<li> 80% </li> <li> 50% </li> <li> 60% </li> <li> 30% </li> <li> 100% </li>
Step 5 − Also add the custom variables to the li tag by defining start and end points of the graph.
<li style="--start: 0.6; --end: 0.4;"> 80% </li> <li style="--start: 0.4; --end: 0.5;"> 50% </li> <li style="--start: 0.5; --end: 0.3;"> 60% </li> <li style="--start: 0.3; --end: 0.7;"> 30% </li> <li style="--start: 0.7; --end: 0.3;"> 100% </li>
Step 6 − Now create a style.css file in the same folder and link the style.css file to the HTML document.
<link rel="stylesheet" href="style.css">
Step 7 − Now target the ‘areaChart’ container and all the list items.
Step 8 − The area chart is created successfully.
Example
In this example we have created the area of chart using the Cascading Styles Sheet (CSS). To achieve this we have created the two files for this first file is the HTML file and other is the styling file. For this we have created the unordered list with the list items. In the HTML file we have created the ul tag with the set of data in it.
<html>
<head>
<title>Area chart using css</title>
<link rel="stylesheet" href="style.css">
<style>
body {
display: flex;
flex-direction: column;
place-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.chart {
margin: auto;
display: contents;
}
.areaChart {
margin: 0;
padding: 1rem;
border: 0;
width: 100%;
max-width: 600px;
height: 15rem;
display: flex;
box-shadow: 0 0 5px black;
border-radius: 5px;
}
li {
border: 0.1px solid rgb(255, 255, 255);
list-style: none;
}
.areaChart>* {
flex-grow: 1;
background: rgb(11, 235, 11);
clip-path: polygon(0% 0%,0 calc(100% * (1 - var(--start))),100% calc(100% * (1 - var(--end))),100% 100%,0 100%);
}
p {
font-size: 2rem;
font-family: 'Segoe UI';
text-align: center;
}
</style>
</head>
<body>
<div class="chart" style="width: 100%;">
<ul class="areaChart">
<li style="--start: 0.6; --end: 0.4;"> 80% </li>
<li style="--start: 0.4; --end: 0.5;"> 50% </li>
<li style="--start: 0.5; --end: 0.3;"> 60% </li>
<li style="--start: 0.3; --end: 0.7;"> 30% </li>
<li style="--start: 0.7; --end: 0.3;"> 100% </li>
</ul>
<p>Area chart using CSS<br><span style="color: green;">tutorialspoint.com</span></p>
</div>
</body>
</html>
The given below image shows the output of the above example, it shows a chart area with the graph which represents the set of data in graphical form. We have set the data in HTML li tag as the customized variable and set the start and end points that are represented in the chart form.
Conclusion
As in the above example we have built a static chart using HTML and CSS. So we can also make the area of the chart dynamic by using the javascript or connecting the API to the chart tag. While using the above example we have to keep one thing in mind that the start point of the first list item should be the same as the end point of the next list item. As we have used the li tags for creating the bars of chart we can also use the div or table container also.
168 Views
