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 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 👋 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 https://bit.ly/react-js-events 📺 Recordings from past events https://bit.ly/react-js-recordings 🎙Listen to our podcasts: 🌊Seaworthy - A podcast about building successful software http://bit.ly/swthy-pdcst ⚓️Even-Keeled - The craft of creating software and effective development teams http://bit.ly/even-keeled-podcast Connect with us: 🌅 Instagram https://www.instagram.com/headwayio 🐦 Twitter https://twitter.com/headwayio ➡️LinkedIn https://bit.ly/follow-headway-linkedin