Blog

Loads of time previously, I’ve proven you the best way to create various kinds of charts utilizing CSS and JavaScript. Right now, I’ll information you on the best way to construct line charts in pure CSS.

What’s a Line Chart?

A line chart appears to be like like a cardiogram; it consists of information factors which can be linked by a line. 

Line chart displaying the inhabitants of the city of Pushkin, Saint Petersburg from 1800 to 2010, measured at varied intervals – Taken from Wikipedia

This sort of chart can present helpful data for traits over the yr, value adjustments, examine behaviors, and many others.  

1. Start With the Information

For this demo, we’ll assume that we would like to visualise in a line chart the next information that describe the worker depend over time:

2. Specify the Web page Markup

We’ll specify a wrapper component that comprises two lists:

• The primary checklist units the y-axis vary. When you take a look at the desk information above, you’ll see that the second column contains values as much as 40. Retaining this in thoughts, we’ll outline six values from 0 to 50 with a step dimension of 10. The values of the y-axis will subsequently be 0, 10, 20, 30, 40, and 50.
• The second checklist units the x-axis information. These are extracted from the primary column of our desk, from lowest to highest. Take into account additionally the beginning, finish, and delay CSS variables that we go to the checklist gadgets. We’ll use them to create the information factors that can assemble the road.

Right here’s the required markup:

Let’s now clarify the values of those variables:

• The beginning values will describe the variety of workers per yr. The very best worth within the y-axis is 50, which implies 100% in % mode. So, for representing 40 workers, we’ll use this calculation: (40 / 50) * 100 =>80%. Equally, for 30 workers, we’ll use this: (30 / 50) * 100 =>60%, and many others.
• To attach the information factors, the tip worth of all checklist gadgets other than the final one ought to match the beginning worth of their subsequent sibling checklist merchandise. That mentioned, the tip worth of the primary checklist merchandise will match the beginning worth of the second checklist merchandise, the tip worth of the second checklist merchandise will match the beginning worth of the third checklist merchandise, and many others.
• The delay values will set the chart animation sequence. The upper the worth, the extra time the associated animation must run.

3. Fashion the Chart

For simplicity, we’ll skip the reset/fundamental types. You’ll be able to test them by clicking the CSS tab of the demo challenge.

The chart wrapper can be a flex container with a 20px hole between the axes. The y-axis width can be auto whereas the x-axis will increase to cowl the remaining area. 

The x-axis and its gadgets may even be flex containers. The gadgets will equally be distributed throughout the primary axis, and their content material will sit on the backside.

Listed here are the related types:

Subsequent, we’ll outline the ::earlier than and ::after pseudo-elements of the checklist gadgets.

The ::earlier than pseudo-elements will assemble the strains, whereas the ::after pseudo-elements, which can be non-obligatory, will create the information factors.

Line Animation

To create the road animation, like we’ve finished in lots of tutorials previously, we’ll make the most of the clip-path property and particularly its polygon() CSS operate.

Earlier than transferring additional, it’s price noting that the simplest strategy to perceive the method we’re going to observe is through the use of a CSS clip-path maker like Clippy.

Simply as a reminder, a component with clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) makes it seem solely.

In our case, let’s think about the road animation for the primary checklist merchandise that has a begin worth of 80% and an finish worth of 40%.

Initially, we’ll set its clip-path property to polygon(0 20%, 0 20%, 0 20%, 0 20%) which can make all factors sit on the similar place.

When the web page masses, we’ll replace the clip-path worth to polygon(0 20%, 100% 40%, 100% calc(40% + 2px), 0 calc(20% + 2px)). That method, the place of the final three factors adjustments, and a line is created whose thickness we will management.

Please be aware that within the Clippy device, we can not add CSS. That’s why I attempted 41% and 21% as a substitute of calc(40% + 2px) and calc(20% + 2px) that seem within the types.

With all this in thoughts, we will now assemble dynamic types whatever the chart’s information factors.

Listed here are the associated types:

Lastly, it’s price noting that to make sure that the chart animation will run on web page load, we’ll use JavaScript so as to add the loaded class to the physique component.

Don’t neglect to make use of your browser instruments to check the ensuing clip-path worth for every merchandise.

Multi-Line Charts

With our single-line chart in place, we will go even additional and create CSS-only multi-line graphs with just a bit extra further markup. 

Take into account the next demo which follows the identical rules we mentioned within the single-line graph:

Conclusion

We simply accomplished one other CSS chart tutorial, people! I hope you loved the demos we developed and realized one or two new issues.

After all, you possibly can at all times create one thing extra superior utilizing a JavaScript charting library. However, however, it’s at all times enjoyable to go the laborious method by experimenting with trendy CSS strategies.

As at all times, thanks for studying!