Build Charts in React

Focused View

Gru Singh

38:27

0 View

1 - Get Ready

1 - GitHub Code Repository.txt

1 - Walk through demo code repository.mp4

02:09

2 - Libraries

2 - Leaflet and ReactLeaflet Libraries.mp4

03:04

3 - Recharts.mp4

01:22

3 - Line Chart

4 - Introduction.mp4

00:42

5 - Overview.mp4

01:30

6 - Use Cases.mp4

00:39

7 - Data Structure.mp4

00:40

8 - Rendering a Line Chart.mp4

03:26

4 - Area and Stacked Area Charts

9 - Introduction.mp4

00:39

10 - Area Chart Overview.mp4

00:45

11 - Stacked Area Chart Overview.mp4

00:22

12 - Use Cases.mp4

00:40

13 - Data Structure.mp4

00:49

14 - Rendering an Area Chart.mp4

02:33

15 - Rendering a Stacked Area Chart.mp4

02:27

5 - Bar Chart

16 - Introduction.mp4

00:19

17 - Overview.mp4

01:00

18 - Use Cases.mp4

00:35

19 - Data Structure.mp4

00:35

20 - Rendering a Bar Chart.mp4

01:18

6 - Pie Chart

21 - Introduction.mp4

00:10

22 - Overview.mp4

01:06

23 - Use Cases.mp4

00:36

24 - Data Structure.mp4

00:30

25 - Rendering a Pie Chart.mp4

01:50

7 - Heatmap

26 - GitHub Repository Build Charts in React.txt

26 - Introduction.mp4

01:29

27 - Overview.mp4

00:50

28 - Data Structure.mp4

01:19

29 - Rendering a Map.mp4

03:02

30 - Rendering a heat layer.mp4

02:01

Description

Learn how to build charts in React

What You'll Learn?

Line Charts: Characteristics, Use cases and implementation in React using the Recharts library
Bar Charts: Characteristics, Use cases and implementation in React using the Recharts library
Area Charts: Line Charts: Characteristics, Use cases and implementation in React using the Recharts library
Stacked Area Charts: Line Charts: Characteristics, Use cases and implementation in React using the Recharts library
Pie Charts: Line Charts: Characteristics, Use cases and implementation in React using the Recharts library
Heatmaps: Line Charts: Characteristics, Use cases and implementation in React using the LeafletJs library

Who is this for?

Beginner or Intermediate Frontend Developers

What You Need to Know?

Working knowledge of React

More details

Description
Are you looking to master data visualization in React? In this comprehensive Udemy course, you'll learn how to build various types of charts using the popular Recharts and leaflet libraries, making your React applications more interactive and visually appealing. Whether you're new to charting or want to deepen your skills, this course covers all the essential charts needed to visualize complex data in a simple, digestible way.

What You'll Learn:
The course offers a hands-on approach with real-world examples and a code repository for you to follow along. You'll explore how to create six essential chart types, each serving a unique purpose in displaying data:
Line Charts â€“ Learn how to represent data trends over time.
Bar Charts â€“ Visualize and compare data across categories with horizontal or vertical bars.
Pie Charts â€“ Show how different categories contribute to the whole using colorful segments.
Area Charts â€“ Represent cumulative data over time, highlighting the magnitude of change.
Stacked Area Charts â€“ Compare multiple data sets, stacked on top of each other, for a comprehensive view of the total value.
Heatmaps â€“ Analyze and visualize patterns and variations in large datasets, perfect for showing event distributions and intensities.
Course Format:
Each section of the course is structured with clear explanations and code examples that follow a consistent learning pattern:
Introduction to the Chart Type: Weâ€™ll start with a high-level overview of each chart, explaining when and why to use it.
Key Characteristics: Explore the defining features of each chart type and what makes them suitable for particular use cases.
Common Use Cases: Learn how these charts apply to real-world scenarios like sales tracking, website analytics, financial reporting, and more.
Data Structure and Setup: Understand the data format required to create each chart using Recharts, with simple, easy-to-follow data samples.
Code Walkthrough: Follow step-by-step instructions to build each chart type from scratch, complete with code examples, styling tips, and customization options.
Why This Course?
By the end of this course, you will have built a wide variety of charts, empowering you to:
- Create visually stunning charts that are responsive, interactive, and easy to customize.
- Use charts to better communicate complex datasets and trends to your users.
- Add polished, professional-looking visualizations to your React applications with minimal effort.

Whether youâ€™re building dashboards, reports, or interactive data-driven apps, this course will give you the skills you need to master data visualization with React, Recharts and LeafletJs.

Join me today and elevate your React projects by building beautiful, functional charts that bring data to life!
Who this course is for:
Beginner or Intermediate Frontend Developers

User Reviews

Rating

average 0

Total votes0

Focused display

Data Visualization

Gru Singh

Instructor's Courses

Gru is a Senior Frontend Engineer specializing in performance, SEO, accessibility, DevOps and developer experience. He has helped organizations modernize tech stacks, standardize and automate build and deployment practices, embrace quality focus, implement test automation, and confidently ship products. He has coached and mentored developers and has helped teams improve their development practices. Gru is a firm believer in the power of the web to change the world and is committed to helping developers build better web experiences.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.