Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Area Chart using CSS
An area chart is a graphical representation of data that displays quantitative information by filling the area between a line and the axis. Using CSS custom properties and the clip-path property, we can create visually appealing area charts directly in the browser without external libraries.
Syntax
.area-chart {
clip-path: polygon(x1 y1, x2 y2, x3 y3, x4 y4);
--start: value;
--end: value;
}
Key Components
To create an area chart, we need these essential elements
-
CSS Custom Properties Variables like
--startand--endto define data points - Clip-path Creates the area shape by clipping elements
- Flexbox Layout Arranges chart segments horizontally
Example: Creating an Area Chart
The following example demonstrates how to create an area chart using CSS custom properties and the clip-path property
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.chart-container {
text-align: center;
}
.area-chart {
width: 500px;
height: 200px;
display: flex;
margin: 20px 0;
border: 2px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.area-chart li {
flex: 1;
list-style: none;
background: linear-gradient(45deg, #4CAF50, #8BC34A);
clip-path: polygon(
0% 0%,
0% calc(100% * (1 - var(--start))),
100% calc(100% * (1 - var(--end))),
100% 100%,
0% 100%
);
margin: 0;
padding: 0;
border-right: 1px solid rgba(255,255,255,0.3);
}
.area-chart li:last-child {
border-right: none;
}
h2 {
color: #333;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="chart-container">
<h2>Sales Performance Area Chart</h2>
<ul class="area-chart">
<li style="--start: 0.8; --end: 0.6;"></li>
<li style="--start: 0.6; --end: 0.9;"></li>
<li style="--start: 0.9; --end: 0.4;"></li>
<li style="--start: 0.4; --end: 0.7;"></li>
<li style="--start: 0.7; --end: 0.5;"></li>
</ul>
<p>Monthly sales data visualization</p>
</div>
</body>
</html>
A smooth green gradient area chart with 5 connected segments displaying sales data. The chart has rounded borders, subtle shadow, and shows connected data points creating a continuous area fill.
How It Works
The area chart uses several CSS techniques
| Property | Purpose |
|---|---|
--start |
Defines the starting height of each segment (0 to 1) |
--end |
Defines the ending height of each segment (0 to 1) |
clip-path: polygon() |
Creates the area shape by clipping the element |
flex: 1 |
Makes each segment equally wide |
Customization Options
You can customize the chart appearance by modifying
- Colors Change the background gradient or use solid colors
- Dimensions Adjust width and height of the chart container
-
Data Points Modify
--startand--endvalues to represent your data - Borders Add borders between segments for better separation
Conclusion
CSS area charts provide a lightweight alternative to JavaScript charting libraries. By using custom properties and clip-path, you can create responsive, customizable charts that work across modern browsers. Remember to ensure the end point of one segment matches the start point of the next for smooth transitions.
393 Views
