Data Design With Chart.js

Craig CampbellOct 28, 2016Lessons: 17Length: 1.3 hours

HTML/CSS JavaScript for Designers

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

3.3 Comparing Data on a Bar Chart

In this lesson, I will show you how to create multiple sets of data for your bar charts. I’ll then highlight a couple of different ways of displaying them.

Related Links

1.Introduction
3 lessons, 05:12

1.3
Setting Up Chart.js in CodePen
02:56

2.Line Charts
4 lessons, 31:37

2.1
Creating a Simple Line Chart
08:27

2.2
Styling Your Line Charts
10:07

2.3
Styling the Data Points
07:35

2.4
Comparing Data on a Line Chart
05:28

3.Bar Charts
3 lessons, 11:32

3.1
Creating a Simple Bar Chart
02:52

3.3
Comparing Data on a Bar Chart
05:19

4.Pie and Doughnut Charts
4 lessons, 15:11

4.1
Creating a Pie Chart
04:21

4.2
More Styling Options
05:16

5.Other Chart.js Features
2 lessons, 12:18

6.Conclusion
1 lesson, 00:34

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

craigsoup

Next lesson playing in 5 seconds

3.3 Comparing Data on a Bar Chart

1.Introduction
3 lessons, 05:12

1.1
Introduction
00:45

1.2
What Is Chart.js?
01:31

1.3
Setting Up Chart.js in CodePen
02:56

2.Line Charts
4 lessons, 31:37

2.1
Creating a Simple Line Chart
08:27

2.2
Styling Your Line Charts
10:07

2.3
Styling the Data Points
07:35

2.4
Comparing Data on a Line Chart
05:28

3.Bar Charts
3 lessons, 11:32

3.1
Creating a Simple Bar Chart
02:52

3.2
Bar Chart Options
03:21

3.3
Comparing Data on a Bar Chart
05:19

4.Pie and Doughnut Charts
4 lessons, 15:11

4.1
Creating a Pie Chart
04:21

4.2
More Styling Options
05:16

4.3
Global Options
03:49

4.4
Doughnut Charts
01:45

5.Other Chart.js Features
2 lessons, 12:18

5.1
Other Charts
05:37

5.2
Animating Data
06:41

6.Conclusion
1 lesson, 00:34

6.1
Final Thoughts
00:34

Data Design With Chart.js

Next lesson playing in 5 seconds

3.3 Comparing Data on a Bar Chart

1.Introduction3 lessons, 05:12

2.Line Charts4 lessons, 31:37

3.Bar Charts3 lessons, 11:32

4.Pie and Doughnut Charts4 lessons, 15:11

5.Other Chart.js Features2 lessons, 12:18

6.Conclusion1 lesson, 00:34

1.Introduction
3 lessons, 05:12

2.Line Charts
4 lessons, 31:37

3.Bar Charts
3 lessons, 11:32

4.Pie and Doughnut Charts
4 lessons, 15:11

5.Other Chart.js Features
2 lessons, 12:18

6.Conclusion
1 lesson, 00:34