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
https://github.com/kelseyleftwich/svg-chart-blog

Want to dive deeper? Check out Kelsey’s blog post!
👉 http://bit.ly/svg-line-chrt-react

🔻 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

#react #javascript #svg #web-development