Find out how to Make Line Charts in Pure CSS

Loads of time up to now, I’ve proven you the best way to create different types of charts utilizing CSS and JavaScript. Immediately, I’ll information you on the best way to construct line charts in pure CSS.

What’s a Line Chart?

A line chart seems like a cardiogram; it consists of information factors which are related via a line. 

This type of chart can present helpful info for tendencies over the yr, value adjustments, examine behaviors, and many others.  

1. Start With the Knowledge

For this demo, we’ll assume that we would like to visualise in a line chart the next information that describe the worker rely through the years:

2. Specify the Web page Markup

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

• The primary checklist units the y-axis vary. In the event you have a look at the desk information above, you’ll see that the second column contains values as much as 40. Preserving this in thoughts, we’ll outline six values from 0 to 50 with a step measurement 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 begin, finish, and delay CSS variables that we go to the checklist gadgets. We’ll use them to create the info factors that may assemble the road.

Right here’s the required markup:

1

  <div class="chart-wrapper">

2

    <ul class="chart-y">

3

      <li>50</li>

4

      <li>40</li>

5

      <li>30</li>

6

      <li>20</li>

7

      <li>10</li>

8

      <li>0</li>

9

    </ul>

10

    <ul class="chart-x">

11

      <li fashion="--start:80%; --end:60%">

12

        <span>2010</span>

13

      </li>

14

      <li fashion="--start:60%; --end:50%; --delay: 1">

15

        <span>2013</span>

16

      </li>

17

      <li fashion="--start:50%; --end:70%; --delay: 2">

18

        <span>2016</span>

19

      </li>

20

      <li fashion="--start:70%; --end:80%; --delay: 3">

21

        <span>2019</span>

22

      </li>

23

      <li fashion="--start:80%; --end:80%; --delay: 4">

24

        <span>2022</span>

25

      </li>

26

    </ul>

27

  </div>

Let’s now clarify the values of those variables:

• The begin values will describe the variety of staff per yr. The very best worth within the y-axis is 50, which implies 100% in % mode. So, for representing 40 staff, we’ll use this calculation: (40 / 50) * 100 =>80%. Equally, for 30 staff, we’ll use this: (30 / 50) * 100 =>60%, and many others.
• To attach the info factors, the finish worth of all checklist gadgets other than the final one ought to match the begin worth of their subsequent sibling checklist merchandise. That mentioned, the finish worth of the primary checklist merchandise will match the begin worth of the second checklist merchandise, the finish worth of the second checklist merchandise will match the begin 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/primary kinds. You may verify them by clicking the CSS tab of the demo mission.

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

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

Listed below are the related kinds:

1

.chart-wrapper {

2

  show: flex;

3

  hole: 20px;

4

}

5

6

.chart-wrapper .chart-x {

7

  show: flex;

8

  flex-grow: 1;

9

}

10

11

.chart-wrapper .chart-x li {

12

  show: flex;

13

  align-items: flex-end;

14

  flex: 1;

15

}

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 will probably be optionally available, will create the info factors.

Line Animation

To create the road animation, like we’ve executed in lots of tutorials up to now, we’ll reap the benefits of the clip-path property and particularly its polygon() CSS operate.

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

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

1

<!--FIRST LIST ITEM-->

2

<li fashion="--start:80%; --end:60%">

3

  <span>2010</span>

4

</li>

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 are able to 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 kinds.

With all this in thoughts, we are able to now assemble dynamic kinds whatever the chart’s information factors.

Listed below are the associated kinds:

1

/*CUSTOM VARIABLES HERE*/

2

3

.chart-wrapper .chart-x li {

4

  place: relative;

5

}

6

7

.chart-wrapper .chart-x li::earlier than,

8

.chart-wrapper .chart-x li::after {

9

  content material: "";

10

  place: absolute;

11

  left: 0;

12

  background: var(--chart-color);

13

}

14

15

.chart-wrapper .chart-x li::earlier than {

16

  high: 0;

17

  width: 100%;

18

  peak: 100%;

19

  clip-path: polygon(

20

    0 calc(100% - var(--start)),

21

    0 calc(100% - var(--start)),

22

    0 calc(100% - var(--start)),

23

    0 calc(100% - var(--start))

24

  );

25

  transition: clip-path 0.5s calc(var(--delay, 0) * 0.5s);

26

}

27

28

.chart-wrapper .chart-x li::after {

29

  high: calc(100% - var(--start));

30

  width: 10px;

31

  peak: 10px;

32

  border-radius: 50%;

33

  rework: translateY(-50%);

34

}

35

36

.loaded .chart-wrapper .chart-x li::earlier than {

37

  clip-path: polygon(

38

    0 calc(100% - var(--start)),

39

    100% calc(100% - var(--end)),

40

    100% calc(calc(100% - var(--end)) + var(--chart-thickness)),

41

    0 calc(calc(100% - var(--start)) + var(--chart-thickness))

42

  );

43

}

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.

1

window.addEventListener("load", operate() {

2

  doc.physique.classList.add("loaded");

3

})

Don’t overlook 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 are able to 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, of us! I hope you loved the demos we developed and realized one or two new issues.

In fact, you may at all times create one thing extra superior utilizing a JavaScript charting library. However, alternatively, it’s at all times enjoyable to go the laborious method by experimenting with trendy CSS methods.

As at all times, thanks for studying!