Draw an Area Chart with HTML and CSS

Tram Ho

When it comes to charts in HTML, sometimes we think of drawing with SVG or Canvas. However, with the power of CSS3, it is possible to draw charts with just plain HTML and CSS. In this article, I will join you to learn how to build a chart, namely Area Chart.
Get started now!

1. Build interface components

First of all, we need to build the elements of the chart. Each <td> tag will represent 1 column of the chart. Because CSS cannot recognize and access HTML documents, we need to pass in each column 2 CSS Custom Properties values ​​- Custom CSS properties are start and end, start and end values ​​are in range from 0 to 1. The custom property allows us to manipulate and work directly with the variable right inside the stylesheet without having to use any CSS preprocessor.

2. Start styling the interface with CSS

The results received:

Look still not out, right? And most of all, the chart is still in column form. So next, we need to convert them to rows and divide the column into equal parts. Before that, remember to delete the background-color of the area-chart class, because that is only for previewing.

The result after splitting into equal columns:

Basically, we’ve come most of the way. Then we just use a new property of CSS3, the clip-path, to convert this pile of boxes into a specific graph.

Tada !!! And here is what we will get.

Here we use the clip-path property and use its polygon function to resize and show only areas within 2 CSS Custom Properties values ​​start and end. In the first column, the start and end values ​​are 0.4 and 0.5, respectively. So when using the clip-path property, it will “cut” away the rest, and only leave a part of the polygon with two sides, respectively, accounting for 40% and 50% of the height of the tag < tr>.

3. Build with more data

So with the above example, hopefully everyone will understand how to build a simple Area Chart with just plain HTML and CSS. In addition, we also know how CSS Custom Properties and CSS clip-path properties work.

Share the news now

Source : Viblo