Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Chart JS, the complete guide. ChartJS missing manual.

Name: Chart JS, the complete guide. ChartJS missing manual.
Rating: 4.1 (597 reviews)

The Chart JS missing manual. Master how to use ChartJS and become a data visualizer with ChartJS!

Created byNicky Wong

Last updated 2/2024

English

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

40 sections • 416 lectures • 26h 49m total length

Welcome to Chart JS 3, the complete guide. Your missing manual!0:59
This course is being updated to version Chart.js 3.
The video of Chart.js 2 are being maintained as many might need this as they are not able to migrate to the latest version.
Quick heads up. The sections will where Chart.js 3 ends. More videos of Chart.js 3 are being added gradually.
Chart.js 3 Starting Point [CRUCIAL FOUNDATION]11:06
This is the starting point and can will be considered the foundation. What you will learn here is how Chart.js documentation is starting to structure the code in their sample. We will cover these building blocks step by step.
The end result is available in the resource section. You can download that as we will use this code as our default for every other video unless indicated differently.

All new updated videos are in Chart.js 4
How to read the Chart.js 3 documentation7:27
In Chart.js the documentation can sometimes be a struggle. Because it is written in a very concise way which is "DRY" (do not repeat yourself). This means that it is written we less as possible words. However, from a beginner standpoint having more is better. In this video I will try to explain the basics of how to read it.
If you struggle to understand this, do not worry. In the practical videos we will code with the Chart.js documentation as reference guide. And you will truly understand how it works in action.
Understanding basic array methods combined with Chart.js6:46
When you work with Chart.js having an understanding of the Javascript Arrays will be essential. If you are familiar with this it will be easier to understand. Javascript arrays is basically a value that holds more values. This video covers some basics of array and gives you a better understanding how arrays work in conjunction with Chart.js.

Fastest way to learn Chart js?0:29
What is the fastest way to learn Chart js?
The answer is give yourself a challenge. The learning setup is different from usual and in this section we will create all kind of charts. These chart challenges will teach you many different parts of Chart.js and you learn how to read the documentation quickly.
The challenges will start easy and gradually increase into complexity. By doing this you will start to have better grasp of all the features of Chart.js in a more fun and challenging way.
Chart.js Challenge 1: How to create a smooth line chart?8:36
How to create a smooth line chart in Chart.js
This challenge explores how to create a nice line chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 2: How to create a horizontal bar chart?3:30
How to create a horizontal bar chart in Chart.js
This challenge explores how to create a horizontal bar chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 3: How to create a narrow rounded border doughnut chart?12:08
How to create a narrow rounded border doughnut chart in Chart.js
This challenge explores how to create a narrow rounded border doughnut chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 4: How to create a scatter line chart?10:46
How to create a scatter line chart in Chart.js
This challenge explores how to create a scatter line chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 5: How to create a bubble chart?8:10
How to create a bubble chart in Chart.js
This challenge explores how to create a bubble chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 6: How to create a bar line combo chart?12:14
How to create a bar line combo chart in Chart.js
This challenge explores how to create a bar line combo chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 7: How to create a rounded stacked bar chart?4:33
How to create a rounded stacked bar chart in Chart.js
This challenge explores how to create a rounded stacked bar chart. We will be using the documentation as guide.
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 8: How to create a polar area chart3:07
How to create a radar chart in Chart.js
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 9: How to create a polar area chart2:55
How to create a polar area chart in Chart.js
Make sure to use the default template that you can find in the first video of this section.
Chart.js Challenge 10: How to select values within the chart12:30
This challenge shows you how to get a specific value within the chart. This is crucial for using function in Chart.js.
Chart.js Challenge 11: How to connect input field that updates the chart16:06
This is part 1 of the how to create a function in the chart.
Chart.js Challenge 12: How to add the label function [Part 2]3:36
This is part 2 of the how to create a function in the chart.
Chart.js Challenge 13: How to change line color of line chart with a button8:11
How to change line color of line chart with a button.
Chart.js Challenge 15: Understanding Data Structures [Part 1]11:18
Understanding Data Structures [Part 1]
Chart.js Challenge 16: How to create data structures from arrays [part 2]13:25
How to create data structures from arrays [Part 2]
Chart.js Challenge 17: Show Multiple Datasets with Data Structures in Chart.js4:28
Show Multiple Datasets with Data Structures in Chart.js [Part 3]
Chart.js Challenge 18: Data Structure with Functions [Part 4]5:05
Combine Data Structures with functions in Chart.js [Part 4]
Chart.js Challenge 19: How to use segments of data structures11:50
How to use segments or the entire of data structures in a chart.
Chart.js Challenge 20: How to customize y-axis tick values7:56
This video we will focus on adjusting the scales values. We can control them by setting a specific incremental values and set a minimum and maximum value.
Chart.js Challenge 21: How to add titles to the scales8:05
In this video we will focus on the scales titles. Adding them to the scales and give them a matching color with the point radius.
Chart.js Challenge 22: How to change color of a single gridline11:28
In this video we will focus on the scale grid line only one grid line a specific color
Chart.js Challenge 23: How to create floating / range bar chart5:31
Chart.js Challenge 24: How to add labels plugin to pie chart17:03
Chart.js Challenge 25: How to create overlapping bar chart6:17
Chart.js Challenge 26: How to use Line Segment Styling in Line Chart10:47
How to use Line Segment Styling in Line Chart. In Chart JS they have a great future called Line Segment Styling. This is wonderful but it is quite hard to understand how it exactly works. Their sample is great but having a clear understanding of p0 and p1 is essential. We will cover this nicely here.

Ready to go Advance?0:16
In this section we will explore the advanced topics. This means that we will cover topics that Chart.js may or may not have in their documentation.
The reference to the documentation will be done as often as possible. You will notice that it tend to not always cover in depth. However, the steps that we take will be explained as elaborate as possible.
Chart.js Challenge 27: How to Show Dotted Dashed Line Chart for Segment10:56
How to Show Dotted Dashed Line Chart for Segment
Challenge 28: How to add or remove gaps between Bar in Bar Chart5:29
How to add or remove gaps between bars in Bar Chart.
How to Create Clickable Pie and Doughnut Slices with Link in Chart js [Part 1]20:25
How to Create Clickable Pie and Doughnut Slices with Link in Chart js
How to create a previous and next button in the chart20:48
Explore how to create a previous and next button to see more data. This method is suitable if you want to reduce the amount of data points that are being displayed on the chart without reloading data. This is very often the case with large charts.
How to create a doughnut chart with text label in the center22:16
How to create a doughnut chart with text label in the center
How to create onhover effect on when hovering on slice of pie chart [Part 2]11:21
Explore how to create an onhover effect on the pie chart.
Understanding chartArea in Chart js12:58
What you should know after completing this section.0:15
What you should know after completing this section:
How to chart blocks are structured
How to use arrays with charts
How to update and change data, design and chart types
How to create basic interactions with the chart based on inputs
How to use data structures
How to add functions to a chart
How to create all the basic charts types
How to read the Chart js documentation

What we will be making0:42
How to create a Bar Growth Indicator Chart Part 19:47
How to create a Bar Growth Indicator Chart Part 212:31
How to create a Bar Growth Indicator Chart in Part 32:08
How to create a Bar Growth Indicator Chart in Part 47:34
How to create a Bar Growth Indicator Chart in Part 517:39
How to create a Bar Growth Indicator Chart in Part 69:21
How to create a Bar Growth Indicator Chart in Part 713:19

What we will be making1:01
We will make here an advanced drill down bar chart. We will create a button in the canvas itself and make it clickable and hide it once we reset the chart to default values.
This is an advanced series very useful for anyone who want to make their chart more interactive and truly love to dig into chartjs and canvas API features deeper.
Make sure you have your default code ready from the starting module 1: Lecture 2.
How to create an Advanced Drill Down Bar Chart Part 16:00
How to create an Advanced Drill Down Bar Chart Part 25:48
How to create an Advanced Drill Down Bar Chart Part 39:54
How to create an Advanced Drill Down Bar Chart Part 417:29
How to create an Advanced Drill Down Bar Chart Part 54:27
How to create an Advanced Drill Down Bar Chart Part 622:25
How to create an Advanced Drill Down Bar Chart Part 719:04
How to create an Advanced Drill Down Bar Chart Part 85:16
How to create an Advanced Drill Down Bar Chart Part 97:14
How to create an Advanced Drill Down Bar Chart Part 1011:16

Requirements

Have an openmind and a willingness to learn.
Interested in making data visual!
Eager to take action.

Description

Chart JS, the complete guide. ChartJS missing manual.

Unlock the Power of Chart.js: The Definitive Guide to Mastering Data Visualization!

Are you tired of struggling with Chart.js, feeling like you're lost in a maze of complicated documentation? Do you wish there was a comprehensive resource that could guide you step by step, revealing the hidden secrets and techniques of this powerful data visualization tool? Your search ends here, my friend!

Introducing "Chart JS: The Missing Manual" – a course meticulously crafted to transform you from a Chart.js novice into a chart-making virtuoso. But why should you invest your time and energy in this course? Let me share my personal journey and why I created this masterpiece.

When I first embarked on my Chart.js journey, I encountered numerous roadblocks. The documentation was convoluted, assuming a level of expertise I hadn't yet attained. I felt the frustration of countless developers who were left scratching their heads, wondering if they would ever crack the code. It was then that I realized the dire need for a comprehensive resource, a missing manual, if you will.

With that burning desire to save others from the same struggles, I meticulously crafted this course. No stone is left unturned as we delve deep into Chart.js, demystifying its complexities and unveiling techniques not found in the documentation. This is the course I wished existed when I started my Chart.js journey – a course that would have saved me countless hours and propelled me to mastery in no time.

But what sets this course apart? How will you learn and what can you expect? Let's dive into the unique features that make "Chart JS: The Missing Manual" a game-changer.

Learn by Doing:

This course doesn't just provide you with theoretical knowledge. Instead, you'll actively engage with the code, following along step by step. But that's not all – you'll face challenging questions, be tested with real-world scenarios, and solve complex problems to truly solidify your skills.

A Chart for Every Occasion:

Line charts, bar charts, stacked bar charts, radar charts, pie charts, doughnut charts, gauge charts – you name it, we cover it all! No chart will remain a mystery to you. Plus, I'll regularly update the course to include the latest Chart.js features and charts, ensuring it remains your definitive reference.

Stay Ahead of the Curve:

As Chart.js evolves, so will this course. Weekly updates and additions will keep you at the forefront of Chart.js development. You'll always have access to the latest features and techniques, making this course your go-to resource for all things Chart.js.

But don't just take my word for it. Here are three reasons why you'll love "Chart JS: The Missing Manual":

Bite-sized Learning: Even if you're new to HTML, CSS, and JavaScript, this course breaks down complex concepts into easy-to-follow steps. You'll learn at your own pace, building a solid foundation in chart-making without feeling overwhelmed.
ChartJS at Your Fingertips: With an ever-growing library of charts and continuous updates, this course will always keep you abreast of the latest Chart.js developments. You'll have a comprehensive reference sheet right at your fingertips.
Unleash Your Charting Confidence: By the end of this course, you'll possess the skills and confidence to create any chart with Chart.js effortlessly. You'll be a chart-making maestro, ready to bring data to life and make the web a more visually engaging place.

Join the ranks of successful Chart.js enthusiasts who have transformed their careers and gained a competitive edge in the world of data visualization. With "Chart JS: The Missing Manual," you'll become a sought-after professional, capable of creating visually stunning charts that captivate audiences and drive impactful decisions.

New Modules Added Each Month:

Currently on Chart.JS Version 4.3.0 (Older versions Chart.js 3.x and Chart.js 2.x are kept for reference)

But that's not all – this course isn't just a one-time investment. It's a dynamic resource that evolves alongside Chart.js itself. As new features and updates are introduced, you'll receive weekly additions to the course, ensuring you stay at the forefront of the Chart.js revolution. You'll always have access to cutting-edge techniques and the latest charting capabilities, positioning you as an industry leader in data visualization.

Imagine the doors that will open when you have the confidence and expertise to create any chart your heart desires. From line charts that showcase trends, to bar charts that unveil comparisons, to pie charts that reveal proportions – you'll have the power to convey complex data in an engaging and accessible manner.

Furthermore, this course goes beyond the basics. It challenges you with real-world scenarios, forcing you to think critically and troubleshoot charting problems. By honing your problem-solving skills, you'll become a true Chart.js professional, equipped to tackle any chart-related challenge that comes your way.

Enroll in "Chart JS: The Missing Manual" today and embark on a transformative journey. Chart.js will no longer be a daunting mystery but a powerful tool in your arsenal. With each line of code you master, you'll gain the confidence to create beautiful, dynamic charts that inspire, inform, and make a lasting impact.

Don't wait! Take control of your charting destiny and join this course now. Together, let's make the web a more visually compelling and data-driven environment. Enroll now to secure your spot and unlock the true potential of Chart.js.

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.)

Chart JS, the complete guide. ChartJS missing manual.

What you'll learn

Explore related topics

Course content

Introduction Chart JS 3 Course4 lectures • 26min

Chart JS 3 challenges26 lectures • 3hr 40min

Chart JS 3 Tooltip Options [In Development]1 lecture • 6min

Chart JS 3 ADVANCE Challenges9 lectures • 1hr 45min

How to create a Waterfall Chart in Chart js7 lectures • 58min

How to create a Bar Growth Indicator Chart in Chart js8 lectures • 1hr 13min

How to create an Advanced Drill Down Bar Chart11 lectures • 1hr 50min

How to create an Doughnut Chart that display text In center onhover4 lectures • 23min

How to create an Indicator Tracker in Chart.js7 lectures • 31min

How to create a crosshair in Chart.js7 lectures • 51min

Requirements

Description

Who this course is for: