How to create an area chart using CSS

Overview

An area chart is used to represent a data set in graphical form. By using HTML and CSS we can create an area chart. Therefore, we will create two custom variables as start and end. Custom variables can be created using the symbol "--" and the variable name. For example, create variables like: -width, -height and -start.

algorithm

Step One - Create an HTML file and open the file in a text editor. Add HTML templates to HTML files.

Step 2 − Now create a parent div container and give it a class name called chart.

<div class="chart"></div>

Step 3 − Create a ul tag to create chart list items.

<ul class="areaChart"></ul>

Step 4 − Now use the li tag to create the bars of the chart

<li> 80% </li>
<li> 50% </li>
<li> 60% </li>
<li> 30% </li>
<li> 100% </li>

Step 5 − You can also add custom variables to the li tag by defining the starting and ending points of the chart.

<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 list items.

Step 8 − The area chart was 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.

   
   <link rel="stylesheet" href="style.css">
   


   

      

         
 80% 
         
 50% 
         
 60% 
         
 30% 
         
 100% 
      
      
Area chart using CSS
tutorialspoint.com
   

The image given below shows the output of the above example, it shows a chart area containing the dataset represented in a graphical form. We set the data as custom variables in the li tag of the HTML and set the start and end points to be represented in the chart.

in conclusion

Like the example above, we built a static chart using HTML and CSS. Therefore, we can also make the chart's areas dynamic by using JavaScript or connecting the API to the chart labels. While using the above example, we have to remember that the starting point of the first list item should be the same as the ending point of the next list item. Since we are using li tags to create the bars of the chart, we can also use a div or table container.

The above is the detailed content of How to create an area chart using CSS. For more information, please follow other related articles on the PHP Chinese website!