Bar Chart with JSX Syntax (Part II)

Stepwise · Intermediate ·🖊️ Copywriting & Content Strategy ·4y ago
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

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
Up next
Why are our bodies never good enough?
Vox
Watch →