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

1.3 Setting Up Chart.js in CodePen

For this course, we will be using CodePen to view and edit the projects that you’ll be building. In this lesson, we’ll take a look at the settings you need in CodePen in order to use Chart.js.

Related Links

CodePen

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

1.3 Setting Up Chart.js in CodePen

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

1.3 Setting Up Chart.js in CodePen

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