Learn How to Build SVG Line Charts in React JavaScript

In this lesson, Kelsey will teach you how to build a line chart using SVGs and React JavaScript. There are thousands of chart packages available via NPM, we'll build one from scratch!

🧐 Why build a line chart from scratch?
▪️ The effort to create this simple chart from scratch would be about the same amount of effort as customizing a library chart.
▪️ You don't have to add another dependency to the project.
▪️ Gain a better understanding of how line charts function.

💻 Source Code for this Project

Want to dive deeper? Check out Kelsey's blog post!

🔻 Jump to a Segment 🔻
00:00 - Start
0:50 - Why build from scratch?
1:48 - Visual aids
2:23 - Container and axes
8:05 - Plotting points
12:12 - Horizontal guides
13:54 - Vertical guides
17:55 - SVG Overview
22:06 - X-axis labels
30:59 - Y-axis labels -
31:14 - Applying concepts to recharts -
38:56 - Wrap-up/Q&A

👋 What is ReactJS Green Bay?
ReactJS Green Bay is a monthly series for front-end developers that use React and JavaScript to build products. Learn about new tools, better workflows, and discuss ideas with a growing community!

🎟 Upcoming events

📺 Recordings from past events

🎙Listen to our podcasts:

🌊Seaworthy - A podcast about building successful software

⚓️Even-Keeled - The craft of creating software and effective development teams

Connect with us:
🌅 Instagram

🐦 Twitter

➡️LinkedIn

[coderaiders-yt]

KELSEY! Fantastic help! Thank you so much for making this!

[headwayio]

🔻 Jump to a Segment 🔻
00:00 - Start
0:50 - Why build from scratch?
1:48 - Visual aids
2:23 - Container and axes
8:05 - Plotting points
12:12 - Horizontal guides
13:54 - Vertical guides
17:55 - SVG Overview
22:06 - X-axis labels
30:59 - Y-axis labels -
31:14 - Applying concepts to recharts -
38:56 - Wrap-up/Q&A

[tedfitzpatrickyt]

This is 2 years late, but … nice! I use React and D3 so this is an interesting take

[zucchini_daily]

Wow, very helpful!
(And changing the way the labels are centered based on width would be more accurate. 😎)

[midhunlc]

Great and simple video.
I got some intro to svg as well.
But just curious how complicated it will be to draw curves using this approach? I am a newbie to svg and from what I see, curves are not easy to draw, unless you have a firm understanding of control points and how they are determined

[Dapito]

Will you make more of these for other type of charts? They are very helpful!

[remingtonsmith]

Great video! one question tho.. How could I rotate the labels on the x axis 90 degrees? any help is appreciated.Thanks!

[m__link]

Hi Kelsey, thank you for your vid. one question : is it possible to hide the X et Y axis with their numbers?the goal is just to show only the chart. Also, how can we rounded the corner in each point?

[kevinmorte]

Hi Kelsey, very nice tutorial, btw. One question, is it important that the padding of the chart is made by the svg? I mean, we could have the same result by just providing actual padding or margin to the whole svg, with css/html; So the chart could start at 0, 0 and end at width, height and with css we can provide with space among the svg.

[pandemonium]

This was very helpful, but I wish you went over y values that don't start with 0. I have values that range between 11 and 12 thousand and, with this code as it is, I have almost a straight line at the top of the chart. I'm currently trying to set a y minimum with the code you've written, if you already know of a way to achieve this the help would be much appreciated!

[MrActec]

Awesome video, thanks!!
Could you share the code in some Github repo ?