Bar Chart with JSX Syntax (Part II)
Skills:
Copywriting Basics80%
We are back with our video series with Stepwise developers and mentors! They are unique and talented people who have extensive knowledge in their fields and our areas of activity. From Custom Software Development, through Cloud, Security and Test Automation topics, to individual programming languages and frameworks! They decided to share this knowledge with you :)
Meet Maciej - Stepwise Senior Frontend Developer.
Today we will be building a Bar Chart using JSX syntax. This time we will use StyledComponents for SVG element styling. As before we will be using useRef, useState and useEffect hooks and more.
If you want to check Maciej's files - feel free to visit his Gitlab:
https://gitlab.com/maciej.drahusz/react-d3js
If you are looking for a job as a Frontend Developer - write to us!
We'd love to hear from you.
Check our website - we are still looking for new talents!
https://stepwise.pl/careers/
0:00 - recap
0:30 - generating new component(NX Library)
2:05 - setting up basic style and box dimensions
2:37 - using Ref to reference chart
3:38 - measuring screen size
4:46 - generating data
5:48 - creating bar component
8:40 - adding bar value text
11:42 - adding XAxis
14:05 - adding YAxis
15:46 - adding Title text
16:45 – summary
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
More on: Copywriting Basics
View skill →Related AI Lessons
Chapters (12)
recap
0:30
generating new component(NX Library)
2:05
setting up basic style and box dimensions
2:37
using Ref to reference chart
3:38
measuring screen size
4:46
generating data
5:48
creating bar component
8:40
adding bar value text
11:42
adding XAxis
14:05
adding YAxis
15:46
adding Title text
16:45
summary
🎓
Tutor Explanation
DeepCamp AI