Chart JS, the complete guide. ChartJS missing manual.
3.7 (354 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,550 students enrolled

Chart JS, the complete guide. ChartJS missing manual.

The Chart JS missing manual. Master how to use ChartJS and become a data visualizer with ChartJS!
3.7 (354 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,550 students enrolled
Created by Nicky Wong
Last updated 2/2019
English
English [Auto]
Current price: $64.99 Original price: $99.99 Discount: 35% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 4 articles
  • 18 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Fully know and understand how Chart JS works.
  • Know how to create a chart from scratch!
  • Create your own line chart from scratch with ChartJS
  • Create your own bar chart from scratch with ChartJS
  • Create your own stacked bar chart from scratch with ChartJS
  • Create your own horizontal bar chart from scratch with ChartJS
  • Create your own pie chart from scratch with ChartJS
  • Create your own donut/doughnut chart from scratch with ChartJS
  • Create your own multi level doughnut / pie chart from scratch with ChartJS
  • Create your own radar chart from scratch with ChartJS
  • Create your own polar area chart from scratch with ChartJS
  • Create your own bubble chart from scratch with ChartJS
  • Create your own scatter chart from scratch with ChartJS
  • Visualize data into beautiful charts for the web.
  • Be a professional in ChartJS
  • Create customized chart titles
  • Create customized chart legends
Course content
Expand all 271 lectures 10:45:09
+ Welcome to ChartJS the complete guide and what you can expect from this course.
4 lectures 19:10

ChartJS the complete guide, welcome to ChartJS

In this course you will learn how to make use of the wonderful JavaScript library named ChartJS. First you will receive a overview of what you can expect from this course.

  1. Meet the instructor and why data visualization will be the next upcoming trend.
  2. The goals of this course
  3. What you can expect (You will learn how to make a Line, Bar, Radar, Polar, Pie & Doughnut/Donut chart from scratch!).

This course was truly intended for everyone who wants to learn ChartJS but struggle because of their very complicated documentation. This course will give you absolute clarity and you will definitely know how to make a chart with ChartJS.

Preview 03:38

This is a notification that this course is being updated. Chart JS has had a huge amount of updates and this course lacks the depth and the content of Chart JS 2. Im dedicated to fix this and rebuild the entire course. If you have any suggestions please let me know. I truly appreciate any kind of suggestions and feedback to improve this course. 

  1. Line Chart (Done)

  2. Bar Chart (Done)

  3. Doughnut Chart (Done)

  4. Pie Chart (Done)

  5. Gauge Chart (is a Doughnut chart tweak) (Done)

  6. Radar Chart (Done)

  7. Polar Area Chart (Done)

  8. Bubble Chart (Done)

  9. Scatter Chart (Done)

  10. Chart Titles Chart (Done)

  11. Combo Bar Line Chart (Done)

  12. Chart Legend (75% completed)

  13. Chart HTML Legend (Done)

  14. Chart Tooltip (Done)

  15. Chart Color Management Options (Done)

  16. Drill Down Charts / Clickable Charts (Done)

  17. Chart + DB (Basic is done more to come)

  18. Dynamic Chart (In progress)

  19. Chart Challenges

  20. Create own charts

Important: Course Updates Coming Soon
07:11

Chart JS Course Roadmap

In this video I will discuss what I call the Chart JS Course Roadmap. This roadmap is something that I recently start using. A Roadmap helps you to clearly show what you will learn based on your level of experience. Chart JS has some complicated topics and before you start with that you must be at a certain level.

Please note we use color coding along with this course. It will help you better along the road of learning Chart JS.

Preview 06:32

Chart JS Course Roadmap Color Coding

In this video I will discuss what these colors mean. You probably understood it from the previous video however you will see all over the course as well.

Preview 01:49
+ Chart JS Course: The Foundation, MUST WATCH [Beginner]
7 lectures 15:34

Chart JS Course: The Foundation introduction

In this section you will learn the foundation. This part is important. we will use this as a starting template. Let's begin!

Preview 00:31

Chart JS Course: Basic Setup and Chart JS latest version

In this video we will focus on the basic setup and latest Chart JS version. We will be using this basic setup through out the entire course.

Preview 02:48

Chart JS Course: Setting up the HTML file

In this video we prepare the HTML file. Having a standard will help. You can have your own version or follow along. I will be using Bootstrap with ChartJS just for a quick setup.

Preview 02:40

Chart JS Course: Designing the chart size and background

In this video we will design the chart and background quickly before we start with the code.

Preview 01:38

Chart JS Course: Chart JS common mistakes

In this video you will learn some of the common mistakes which can confuse a beginner of Chart JS.

Preview 03:55

Chart JS Course: Chart JS understanding the basic codes

In this video we will quickly go through the standard lines of codes. This is basic code you will be using consistently with Chart JS.

Preview 03:19

Chart JS Course: The Foundation End

This is the end of the Foundation section. In the resource section you can find the html document for your reference. Please note that we will use standard setup all over the course.

Preview 00:43
+ Line Chart with Chart JS [Beginner]
29 lectures 01:05:59

Chart JS Course: Line Chart Introduction

In this section we will focus on the Line Chart. Make sure you have the starting template ready. Let's begin!

Preview 00:29

Chart JS Course: Line Chart labels

In this video you learn how to use labels for Line chart.

Preview 03:22

Chart JS Course: Line Chart label

In this video you learn how to use label for Line chart.

Preview 02:41

Chart JS Course: Line Chart backgroundColor

In this video you learn how to use backgroundColor for Line chart.

Chart JS Course: Line Chart backgroundColor
03:57

Chart JS Course: Line Chart borderColor

In this video you learn how to use borderColor for Line chart.

Chart JS Course: Line Chart borderColor
00:57

Chart JS Course: Line Chart borderWidth

In this video you learn how to use borderWidth for Line chart.

Chart JS Course: Line Chart borderWidth
01:09

Chart JS Course: Line Chart borderDash

In this video you learn how to use borderDash for Line chart.

Chart JS Course: Line Chart borderDash
02:15

Chart JS Course: Line Chart borderDashOffset

In this video you learn how to use borderDashOffset for Line chart.

Chart JS Course: Line Chart borderDashOffset
02:09

Chart JS Course: Line Chart borderCapStyle

In this video you learn how to use borderCapStyle for Line chart.

Chart JS Course: Line Chart borderCapStyle
03:09

Chart JS Course: Line Chart borderJoinStyle

In this video you learn how to use borderJoinStyle for Line chart.

Chart JS Course: Line Chart borderJoinStyle
02:11

Chart JS Course: Line Chart cubicInterpolationMode

In this video you learn how to use cubicInterpolationMode for Line chart.

Chart JS Course: Line Chart cubicInterpolationMode
02:39

Chart JS Course: Line Chart fill

In this video you learn how to use fill for Line chart.

Chart JS Course: Line Chart fill
02:20

Chart JS Course: Line Chart lineTension

In this video you learn how to use lineTension for Line chart.

Chart JS Course: Line Chart lineTension
03:19

Chart JS Course: Line Chart pointBackgroundColor

In this video you learn how to use pointBackgroundColor for Line chart.

Chart JS Course: Line Chart pointBackgroundColor
03:24

Chart JS Course: Line Chart pointBorderColor

In this video you learn how to use pointBorderColor for Line chart.

Chart JS Course: Line Chart pointBorderColor
01:27

Chart JS Course: Line Chart pointBorderWidth

In this video you learn how to use pointBorderWidth for Line chart.

Chart JS Course: Line Chart pointBorderWidth
03:08

Chart JS Course: Line Chart pointRadius

In this video you learn how to use pointRadios for Line chart.

Chart JS Course: Line Chart pointRadius
01:35

Chart JS Course: Line Chart pointStyle

In this video you learn how to use pointStyle for Line chart.

Chart JS Course: Line Chart pointStyle
05:33

Chart JS Course: Line Chart hitPointRadius

In this video you learn how to use hitPointRadius for Line chart.

Chart JS Course: Line Chart hitPointRadius
01:39

Chart JS Course: Line Chart pointHoverBackgroundColor

In this video you learn how to use pointHoverBackgroundColor for Line chart.

Chart JS Course: Line Chart pointHoverBackgroundColor
01:03

Chart JS Course: Line Chart pointHoverBorderColor

In this video you learn how to use pointHoverBorderColor for Line chart.

Chart JS Course: Line Chart pointHoverBorderColor
01:03

Chart JS Course: Line Chart pointHoverBorderWidth

In this video you learn how to use pointHoverBorderWidth for Line chart.

Chart JS Course: Line Chart pointHoverBorderWidth
00:55

Chart JS Course: Line Chart pointHoverRadius

In this video you learn how to use pointHoverRadius for Line chart.

Chart JS Course: Line Chart pointHoverRadius
01:22

Chart JS Course: Line Chart showLine

In this video you learn how to use showLine for Line chart.

Chart JS Course: Line Chart showLine
01:12

Chart JS Course: Line Chart spanGaps

In this video you learn how to use spanGaps for Line chart.

Chart JS Course: Line Chart spanGaps
03:18

Chart JS Course: Line Chart steppedLine

In this video you learn how to use steppedLine for Line chart.

Chart JS Course: Line Chart steppedLine
02:19

Chart JS Course: Line Chart data

In this video you learn how to use data for Line chart.

Chart JS Course: Line Chart data
02:12

Chart JS Course: Line Chart options Stacked Area Line Chart

In this video you learn how to use the option Stacked Area Line chart.

Chart JS Course: Line Chart options Stacked Area Line Chart
04:21

Chart JS Course: Line Chart End

This is the end of the Line Chart section. In the resource section you can find the html document for your reference.

Chart JS Course: Line Chart End
00:51
+ Bar Chart JS [Beginner]
17 lectures 27:23

Chart JS Course: Bar Chart Introduction

In this section we will focus on the Bar Chart. Make sure you have the starting template ready. Let's begin!

Chart JS Course: Bar Chart Introduction
00:32

Chart JS Course: Bar Chart type

In this video you learn how to use type for Bar chart.

Chart JS Course: Bar Chart type
00:43

Chart JS Course: Bar Chart label

In this video you learn how to use label for Bar chart.

Chart JS Course: Bar Chart label
02:05

Chart JS Course: Bar Chart backgroundColor

In this video you learn how to use backgroundColor for Bar chart.

Chart JS Course: Bar Chart backgroundColor
01:42

Chart JS Course: Bar Chart borderColor

In this video you learn how to use borderColor for Bar chart.

Chart JS Course: Bar Chart borderColor
01:16

Chart JS Course: Bar Chart borderWidth

In this video you learn how to use borderWidth for Bar chart.

Chart JS Course: Bar Chart borderWidth
00:39

Chart JS Course: Bar Chart borderSkipped

In this video you learn how to use borderSkipped for Bar chart.

Chart JS Course: Bar Chart borderSkipped
01:02

Chart JS Course: Bar Chart hoverBackgroundColor

In this video you learn how to use hoverBackgroundColor for Bar chart.

Chart JS Course: Bar Chart hoverBackgroundColor
00:55

Chart JS Course: Bar Chart hoverBorderColor

In this video you learn how to use hoverBorderColor for Bar chart.

Chart JS Course: Bar Chart hoverBorderColor
00:55

Chart JS Course: Bar Chart hoverBorderWidth

In this video you learn how to use hoverBorderWidth for Bar chart.

Chart JS Course: Bar Chart hoverBorderWidth
00:52

Chart JS Course: Bar Chart options barPercentage

In this video you learn how to use options barPercentage for Bar chart.

Chart JS Course: Bar Chart options barPercentage
03:06

Chart JS Course: Bar Chart options categoryPercentage

In this video you learn how to use options categoryPercentage for Bar chart.

Chart JS Course: Bar Chart options categoryPercentage
03:03

Chart JS Course: Bar Chart options barThickness maxBarThickness

In this video you learn how to use options barThickness and maxBarThickness for Bar chart.

Chart JS Course: Bar Chart options barThickness maxBarThickness
02:18

Chart JS Course: Bar Chart options gridlines offsetGridLines

In this video you learn how to use options gridlines offsetGridLines for Bar chart.

Chart JS Course: Bar Chart options gridlines offsetGridLines
03:05

Chart JS Course: Bar Chart options stackedBar

In this video you learn how to use options stackedBar for Bar chart.

Chart JS Course: Bar Chart options stackedBar
02:45

Chart JS Course: Bar Chart options horizontalBar and stackedBar

In this video you learn how to use options horizontalBar and stackedBar for Bar chart.

Chart JS Course: Bar Chart options horizontalBar and stackedBar
02:00

Chart JS Course: Bar Chart End

This is the end of the Bar Chart section. In the resource section you can find the html document for your reference.

Chart JS Course: Bar Chart End
00:25
+ Radar Chart with ChartJS 2 [Beginner]
22 lectures 26:53

Chart JS Course: Radar Chart Introduction

In this section we will focus on the Radar Chart. Make sure you have the starting template ready. Let's begin!

Chart JS Course: Radar Chart Introduction
00:44

Chart JS Course: Radar Chart type

In this video you learn how to use type for Radar chart.

Chart JS Course: Radar Chart type
01:36

Chart JS Course: Radar Chart label

In this video you learn how to use label for Radar chart.

Chart JS Course: Radar Chart label
01:01

Chart JS Course: Radar Chart backgroundColor

In this video you learn how to use backgroundColor for Radar chart.

Chart JS Course: Radar Chart backgroundColor
00:49

Chart JS Course: Radar Chart borderColor

In this video you learn how to use borderColor for Radar chart.

Chart JS Course: Radar Chart borderColor
00:52

Chart JS Course: Radar Chart borderWidth

In this video you learn how to use borderWidth for Radar chart.

Chart JS Course: Radar Chart borderWidth
00:54

Chart JS Course: Radar Chart borderDash

In this video you learn how to use borderDash for Radar chart.

Chart JS Course: Radar Chart borderDash
01:45

Chart JS Course: Radar Chart borderDashOffset

In this video you learn how to use borderDashOffset for Radar chart.

Chart JS Course: Radar Chart borderDashOffset
02:18

Chart JS Course: Radar Chart borderStyleCap

In this video you learn how to use borderStyleCap for Radar chart.

Chart JS Course: Radar Chart borderStyleCap
02:40

Chart JS Course: Radar Chart borderJoinStyle

In this video you learn how to use borderJoinStyle for Radar chart.

Chart JS Course: Radar Chart borderJoinStyle
01:49

Chart JS Course: Radar Chart lineTension

In this video you learn how to use lineTension for Radar chart.

Chart JS Course: Radar Chart lineTension
Processing..

Chart JS Course: Radar Chart pointBackgroundColor

In this video you learn how to use pointBackgroundColor for Radar chart.

Chart JS Course: Radar Chart pointBackgroundColor
01:21

Chart JS Course: Radar Chart pointBorderColor

In this video you learn how to use pointBorderColor for Radar chart.

Chart JS Course: Radar Chart pointBorderColor
01:05

Chart JS Course: Radar Chart pointBorderWidth

In this video you learn how to use pointBorderWidth for Radar chart.

Chart JS Course: Radar Chart pointBorderWidth
01:03

Chart JS Course: Radar Chart pointRadius

In this video you learn how to use pointRadius for Radar chart.

Chart JS Course: Radar Chart pointRadius
01:30

Chart JS Course: Radar Chart pointStyle

In this video you learn how to use pointStyle for Radar chart.

Chart JS Course: Radar Chart pointStyle
01:56

Chart JS Course: Radar Chart pointHitRadius

In this video you learn how to use pointHitRadius for Radar chart.

Chart JS Course: Radar Chart pointHitRadius
01:14

Chart JS Course: Radar Chart pointHoverBackgroundColor

In this video you learn how to use pointHoverBackgroundColor for Radar chart.

Chart JS Course: Radar Chart pointHoverBackgroundColor
01:12

Chart JS Course: Radar Chart pointHoverBorderColor

In this video you learn how to use pointHoverBorderColor for Radar chart.

Chart JS Course: Radar Chart pointHoverBorderColor
01:04

Chart JS Course: Radar Chart pointHoverBorderWidth

In this video you learn how to use pointHoverBorderWidth for Radar chart.

Chart JS Course: Radar Chart pointHoverBorderWidth
Processing..

Chart JS Course: Radar Chart pointHoverRadius

In this video you learn how to use pointHoverRadius for Radar chart.

Chart JS Course: Radar Chart pointHoverRadius
01:07

Chart JS Course: Radar Chart End

This is the end of the Radar Chart section. In the resource section you can find the html document for your reference.

Chart JS Course: Radar Chart End
00:53
+ Doughnut Pie Chart JS 2 [Beginner]
17 lectures 36:38

Chart JS Course: Doughnut / Pie Chart Introduction

In this section we will focus on the Doughnut / Pie Chart. Make sure you have the starting template ready. Let's begin!

Chart JS Course: Doughnut / Pie Chart Introduction
01:13

Chart JS Course: Doughnut / Pie Chart type

In this video you learn how to use type for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart type
01:35

Chart JS Course: Doughnut / Pie Chart backgroundColor

In this video you learn how to use backgroundColor for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart backgroundColor
02:08

Chart JS Course: Doughnut / Pie Chart borderColor

In this video you learn how to use borderColor for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart borderColor
00:43

Chart JS Course: Doughnut / Pie Chart borderWidth

In this video you learn how to use borderWidth for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart borderWidth
01:02

Chart JS Course: Doughnut / Pie Chart hoverBackgroundColor

In this video you learn how to use hoverBackgroundColor for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart hoverBackgroundColor
00:44

Chart JS Course: Doughnut / Pie Chart hoverBorderColor

In this video you learn how to use hoverBorderColor for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart hoverBorderColor
01:22

Chart JS Course: Doughnut / Pie Chart hoverBorderWidth

In this video you learn how to use hoverBorderWidth for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart hoverBorderWidth
01:02

Chart JS Course: Doughnut / Pie Chart options cutoutPercentage

In this video you learn how to use options cutoutPercentage for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart options cutoutPercentage
02:08

Chart JS Course: Doughnut / Pie Chart options rotation

In this video you learn how to use options rotation for Doughnut / Pie chart. Chart JS uses the math.PI formula. The PI formula starts with the value of PI = 3.141592653589793. To rotate the chart a certain degrees all you need is to use these numbers. Special note for Chart JS 25% or 90 degrees rotation the value is higher than usual. If I find a better value this video will be updated.

  • 25% || 90 = 6.283185307179586

  • 50% || 180 =  1.5707963267948966

  • 75% || 270 = 3.141592653589793

  • 100% || 360 = 4.71238898038469

Chart JS Course: Doughnut / Pie Chart options rotation
04:09

Chart JS Course: Doughnut / Pie Chart options circumference

In this video you learn how to use options circumference for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart options circumference
03:58

Chart JS Course: Doughnut / Pie Chart options animateRotate

In this video you learn how to use options animateRotate for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart options animateRotate
01:36

Chart JS Course: Doughnut / Pie Chart options animateScale

In this video you learn how to use options animateScale for Doughnut / Pie chart.

Chart JS Course: Doughnut / Pie Chart options animateScale
01:22

Chart JS Course: Multi Level Doughnut / Pie Chart

In this video you learn how to create a Multi Level Doughnut / Pie Chart. The official name is a Multi Level Pie chart but in reality we create a doughnut chart with multiple levels. Even if you would chart in Chart JS the type from doughnut to pie you will notice nothing changes.

Chart JS Course: Multi Level Doughnut / Pie Chart
04:56

Chart JS Course: Making a Gauge Chart from a Doughnut / Pie Chart

In this video we will start to create a very simplified Gauge (pronounce as 'gaged' from engaged) chart. Chart JS indicates in their documentation that a Gauge chart is not a built in feature. While that is true but it is not entirely true. With a very simple tweak we can start making a quick Gauge Chart so you do not need to find alternatives.

What is a Gauge Chart? A Gauge chart is a chart that displays a value. Just think about a speed-o-meter chart where the needle indicates how fast you drive.

Please note it does not have a needle, but it is something additional to keep your options open.


Chart JS Course: Making a Gauge Chart from a Doughnut / Pie Chart
06:00

Chart JS Course: Expanding the arc of a Gauge Chart from a Doughnut / Pie Chart

In this video we will continue to create a very simplified Gauge (pronounce as 'gaged' from engaged) chart. We will expand the arc so it will have more a suitable look of an Speed-o-Meter chart.

What is a Gauge Chart? A Gauge chart is a chart that displays a value. Just think about a Speed-o-Meter chart where the needle indicates how fast you drive.

Please note it does not have a needle, but it is something additional to keep your options open.


Chart JS Course: Expanding the arc of a Gauge Chart from a Doughnut / Pie Chart
01:56

Chart JS Course: Doughnut / Pie Chart End

This is the end of the Doughnut / Pie Chart section. In the resource section you can find the html document for your reference.

  1. Doughnut / Pie Chart HTML file

  2. Gauge Pie Chart HTML file


Chart JS Course: Doughnut / Pie Chart End
00:44
+ Polar Area Chart JS [Beginner]
12 lectures 14:34

Chart JS Course: Polar Area Chart Introduction

In this section we will focus on the Polar Area Chart. Make sure you have the starting template ready. Let's begin!

Chart JS Course: Polar Chart Introduction
01:23

Chart JS Course: Polar Area Chart type

In this video you learn how to use type for Polar Area chart.

Chart JS Course: Polar Area Chart type
00:37

Chart JS Course: Polar Area Chart backgroundColor

In this video you learn how to use backgroundColor for Polar Area chart.

Chart JS Course: Polar Area Chart backgroundColor
01:57

Chart JS Course: Polar Area Chart borderColor

In this video you learn how to use borderColor for Polar Area chart.

Chart JS Course: Polar Area Chart borderColor
00:46

Chart JS Course: Polar Area Chart borderWidth

In this video you learn how to use borderWidth for Polar Area chart.

Chart JS Course: Polar Area Chart borderWidth
01:22

Chart JS Course: Polar Area Chart hoverBackgroundColor

In this video you learn how to use hoverBackgroundColor for Polar Area chart.

Chart JS Course: Polar Area Chart hoverBackgroundColor
00:58

Chart JS Course: Polar Area Chart hoverBorderColor

In this video you learn how to use hoverBorderColor for Polar Area chart.

Chart JS Course: Polar Area Chart hoverBorderColor
00:55

Chart JS Course: Polar Area Chart hoverBorderWidth

In this video you learn how to use hoverBorderWidth for Polar Area chart.

Chart JS Course: Polar Area Chart hoverBorderWidth
01:04

Chart JS Course: Polar Area Chart options startAngle

In this video you learn how to use options startAngle for Polar Area chart.

Chart JS Course: Polar Area Chart options startAngle
01:36

Chart JS Course: Polar Area Chart options animation rotate

In this video you learn how to use options animation rotate for Polar Area chart.

Chart JS Course: Polar Area Chart options animation rotate
01:20

Chart JS Course: Polar Area Chart options animation scale

In this video you learn how to use options animation scale for Polar Area chart.

Chart JS Course: Polar Area Chart options animation scale
01:44

Chart JS Course: Polar Area Chart End

This is the end of the Polar Area Chart section. In the resource section you can find the html document for your reference.

Chart JS Course: Polar Area Chart End
00:52
+ Bubble Chart with ChartJS [Beginner]
16 lectures 20:45

Chart JS Course: Bubble Chart Introduction

In this section we will focus on the Bubble Chart. Make sure you have the starting template ready. Let's begin!

Chart JS Course: Bubble Chart Introduction
01:25

Chart JS Course: Bubble Chart type

In this video you learn how to use type for Bubble chart.

Chart JS Course: Bubble Chart type
01:48

Chart JS Course: Bubble Chart data

In this video you learn how to use data for Bubble chart.

Chart JS Course: Bubble Chart data
02:35

Chart JS Course: Bubble Chart backgroundColor

In this video you learn how to use backgroundColor for Bubble chart.

Chart JS Course: Bubble Chart backgroundColor
01:00

Chart JS Course: Bubble Chart borderColor

In this video you learn how to use borderColor for Bubble chart.

Chart JS Course: Bubble Chart borderColor
00:33

Chart JS Course: Bubble Chart borderWidth

In this video you learn how to use borderWidth for Bubble chart.

Chart JS Course: Bubble Chart borderWidth
00:58

Chart JS Course: Bubble Chart hoverBackgroundColor

In this video you learn how to use hoverBackgroundColor for Bubble chart.

Chart JS Course: Bubble Chart hoverBackgroundColor
01:24

Chart JS Course: Bubble Chart hoverBorderColor

In this video you learn how to use hoverBorderColor for Bubble chart.

Chart JS Course: Bubble Chart hoverBorderColor
00:59

Chart JS Course: Bubble Chart hoverBorderWidth

In this video you learn how to use hoverBorderWidth for Bubble chart.

Chart JS Course: Bubble Chart hoverBorderWidth
00:56

Chart JS Course: Bubble Chart hoverRadius

In this video you learn how to use hoverRadius for Bubble chart.

Chart JS Course: Bubble Chart hoverRadius
01:40

Chart JS Course: Bubble Chart hitRadius

In this video you learn how to use hitRadius for Bubble chart.

Chart JS Course: Bubble Chart hitRadius
01:22

Chart JS Course: Bubble Chart label

In this video you learn how to use label for Bubble chart.

Chart JS Course: Bubble Chart label
01:35

Chart JS Course: Bubble Chart pointStyle

In this video you learn how to use pointStyle for Bubble chart.

Chart JS Course: Bubble Chart pointStyle
02:17

Chart JS Course: Bubble Chart radius

In this video you learn how to use radius for Bubble chart.

Chart JS Course: Bubble Chart radius
01:05

Chart JS Course: Bubble Chart Scriptables Indexables

In this video is still standby as this part will come soon.

Chart JS Course: Bubble Chart Scriptables Indexables
00:30

Chart JS Course: Bubble Chart End

This is the end of the Bubble Chart section. In the resource section you can find the html document for your reference.

Chart JS Course: Bubble Chart End
00:38
+ Scatter Chart in Chart JS [Beginner]
5 lectures 08:57

Chart JS Course: Scatter Chart Introduction

In this section we will focus on the Scatter Chart. Make sure you have the starting template ready. Let's begin!

Chart JS Course: Scatter Chart Introduction
01:13

Chart JS Course: Scatter Chart type

In this video you learn how to use type for scatter chart.

Chart JS Course: Scatter Chart type
00:54

Chart JS Course: Scatter Chart data

In this video you learn how to use data for scatter chart.

Chart JS Course: Scatter Chart data
03:18

Chart JS Course: Scatter Chart list of objects

In this video we will glance through the list of objects. Scatter charts foundation is from a Line Chart. This means that their options are identical.

I decided to skip video about this. However, if you struggle and would like all of these options in the video please comment on this video. I will create the videos if there is interest for it.

Chart JS Course: Scatter Chart list of objects
02:08

Chart JS Course: Scatter Chart End

This is the end of the Scatter Chart section. In the resource section you can find the html document for your reference.

Chart JS Course: Scatter Chart End
01:24
+ Chart JS 2 Chart Title [Semi Intermediate]
12 lectures 18:28

Chart JS Course: Chart Title Introduction

In this section we will focus on the Chart Title options. This is the semi intermediate section. While this topic is quite easy you do need to have understand of how to create a chart. Make sure you have the starting template ready.

Chart JS Course: Chart Title Introduction
00:34

Chart JS Course: Chart Title display

In this video you learn how to use display option.

Chart JS Course: Chart Title display
02:33

Chart JS Course: Chart Title text

In this video you learn how to use text option.

Chart JS Course: Chart Title text
01:14

Chart JS Course: Chart Title position

In this video you learn how to use position option.

Chart JS Course: Chart Title position
02:30

Chart JS Course: Chart Title fontSize.

In this video you learn how to use fontSize option.

Chart JS Course: Chart Title fontSize
00:52

Chart JS Course: Chart Title fontFamily

In this video you learn how to use fontFamily option.

Chart JS Course: Chart Title fontFamily
01:35

Chart JS Course: Chart Title fontColor

In this video you learn how to use fontColor option.

Chart JS Course: Chart Title fontColor
00:58

Chart JS Course: Chart Title fontStyle

In this video you learn how to use fontStyle option.

Chart JS Course: Chart Title fontStyle
01:58

Chart JS Course: Chart Title padding

In this video you learn how to use padding option.

Chart JS Course: Chart Title padding
01:26

Chart JS Course: Chart Title lineHeight

In this video you learn how to use lineHeight option.

Chart JS Course: Chart Title lineHeight
02:17

Chart JS Course: Chart Title Text Array

In this video you learn how to use text array option.

Chart JS Course: Chart Title Text Array
01:39

Chart JS Course: Chart Title End

This is the end of this section. You now know how to create Chart Titles for your chart. The source code has been added in the resource section for personal reference.

Chart JS Course: Chart Title End
00:52
Requirements
  • Have an openmind and a willingness to learn.
  • Interested in making data visual!
  • Eager to take action.
Description

Chart JS the missing manual!
=====================================================================

Course is made in the version Chart JS 2.7.2

New videos are used with version Chart JS 2.7.3

=====================================================================

Why Should you take this course?

Let me explain my personal story. When I started to learn Chart JS it was a real challenge. Creating charts was already hard, however understanding the documentation was the biggest structure. I could not belief how complicated the documentation was. I felt it was written by expert developers that assume you knew how to already code in Chart JS. Just look at the documentation and a lot is missing out.

I remembered when I finally was able to get a chart on the page. I felt like I won the jackpot. Finally it worked but I quickly realize that what I really wanted was create charts that are directly connected with my database. And nothing about that single topic is found anywhere.

Because of this struggle I decided to create this wonderfully detailed course. This is what I coined as the Chart JS missing manual. Why? Because it covers so much in detail en topics not being shown in Chart JS documentation. This course is what I would say the course I wished I had before starting out. It would save a lot of time and could get me up to speed fast.

=====================================================================

How you learn in this Chart JS course?

=====================================================================

In this course I will take you from absolute beginner in Chart JS to a professional Chart JS developer. You will be following along with the codes but there is more.

  1. You will get challenging questions about Chart JS.

  2. You will be tested with some challenges in Chart JS and see if you can complete them on time.

  3. You will get problem cases that forces you to think and debug the problems in the chart.

==========================================================================

What can you expect from this course?

==========================================================================

You will be able to create charts guaranteed! This course is very easy to follow as we are doing step by step. More complicated items will even be discussed line by line. 

You will create:

  1. Line chart with Chart JS

  2. Bar chart with Chart JS

  3. Stacked bar chart with Chart JS

  4. Horizontal bar chart with Chart JS

  5. Radar chart with Chart JS

  6. Polar chart with Chart JS

  7. Pie chart with Chart JS

  8. Doughnut chart with Chart JS

  9. Gauge Chart with Chart JS (YES we can make them as well with minor tweaks!)

  10. Bubble chart with Chart JS

  11. Scatter chart with Chart JS

  12. Create Chart Titles

  13. Combo Bar Line Chart

  14. Customize Chart Legends

  15. Customize Chart Tooltips

  16. Chart JS Color management / Gradient / Chart Colors based on color

  17. Drill Down Charts / Clickable Charts

  18. Chart JS with Database MYSQL PHP

  19. Dynamic charts with AJAX update and input forms

You will learn how to make each of these charts and I will be updating these sections every once and a while. ChartJS is developing quickly with many new features and charts. This course will be your absolute reference course for making every possible chart with Chart JS.

And you will be solving some challenging problems to see if you are really a PRO in Chart JS! Some of them are really hard but once you master that you are very skilled to make all kind of charts with Chart JS!

==========================================================================

"What Version is this course made?"

In this entire course you will learn codes in the version Chart JS 2.7.2.

New videos are created in latest version Chart JS 2.7.3.

==========================================================================

"What is the most exciting part of this course?"

My obsession of having real dynamic charts from a database. It is one of the best skills

that you must know. It is discussed here in depth.

==========================================================================

"Do you update the course with new items"

Yes weekly new items appear and currently this course is being hugely extended!

==========================================================================

3 Reason why you will love this course!

==========================================================================

  1. You will truly learn how to make a chart for the web in a easy step to step follow guide. It is in bite size steps which makes it easy to follow even if you are completely new to HTML, CSS and JavaScript. 

  2. This course will always be updated with the latest ChartJS development, there are far more charts than those.

  3. This course will be you absolute reference sheet for ChartJS. It covers the most important aspects of Chart JS library and makes sure you are ready to start using it to build chart. 


==========================================================================

The main objective of this course

==========================================================================

Make Chart JS accessible for everyone who wants to learn it. At the end of this course you MUST and WILL be confident that you can create any chart with Chart JS with ease.

==========================================================================

Let's go and start make those Charts!

========================================================================== 

It is time to dive in! Start and create your charts for the web! Join this course and make the web a more chart friendly place!

Who this course is for:
  • Data workers that need to translate data into visuals.
  • Web programmers that need to make use of charts for the web.
  • Data analyst that needs to find new methods to consume data faster or present data effectively
  • Professionals that need to create charts for the web.
  • Beginners or advanced programmers that truly want to learn how to get started with ChartJS
  • People who tried to learn ChartJS but struggle because the ChartJS documentation is not good.
  • This course is build for every type of user. (Beginner, advanced or for people with no single knowledge all.)