Donut Pie Chart with Chart Js. Create yours from scratch!

Discover how to create a Donut Pie Chart with Chart JS in a very easy manner. A step by step guide.
0.5 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
9 students enrolled
Take This Course
  • Lectures 26
  • Length 42 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course Description

Create your Donut Pie Chart with Chart JS

Learn how to create your own Donut or Pie chart with Chart JS. The internet is loaded with data and now we struggle to understand this data jungle! With Chart JS you learn how to create your Donut or Pie Chart with Chart JS and communicate it in seconds.

To explain this let me take you back to my story! When I started with Chart JS I was puzzled! There is a wonderful documentation that is not able to tell you as a starter how to use it. I could not understand why it was so hard to read this. My goal is learning how to make a very basic chart in the beginning. Eventually it worked but from that moment I thought this needs to be easier.


What will I learn in this course?

You will learn how to create a Donut or Pie chart with Chart JS. This is a JavaScript library that simplifies the way of making charts for the web. However, the question should not be what you will learn but WHY!


Why should I learn this?

The future is changing! Data overload was normal before but we are now in a new era! The era of Data Drowning! With Big Data impacting all the industries we have a Data Overload multiplied by 10!

Luckily charts are a huge solution of this pressing and growing problem! We need to consume data faster but we do not have the time to do that. We know a picture is worth more than a 1000 words! Well here it is true! Graphs are the future and they were so hard to produce before! Gladly now with multiple JavaScript Libraries it can be done!


In this course I will should you How to do it!

You can expect it to be the easiest course about Chart JS ever! The reason why I tell you that is because I started out from scratch! It is truly idiot proof! You will learn in a step by step method that I know that works!


How structured is this course?

The course is setup in multiple sections and some challenging brain busters! Every time you will see a new line of code! You just follow along and understand what is being taugh here. This method is a real reference for everyone who wants to understand it with video. The quick and easy way!


Why should I take your course?


This is probably the most important question that you have! There are a few reasons, but the main reason is this. My course is truly from scratch! I will not teach you all the tricks but I give your a target to hit. Every video will teach you how to do one thing at the time.

You will understand it and you can follow it quickly! It is truly designed for the beginner and as low keyed as possible! I had to because all the documentation is usually written for professionals that already know the subject.

Next, the best ways to learn is by purposeful learning! This means you learn for a viable reason! Big Data is here! We all need to translate data! Every second the world is producing more and more data. The new challenge is translating data into useful information and quick! We need to consume huge reports in seconds! The only way to do this is with charts and Chart JS is a very efficient and wonderful tool to help you out.

What are the requirements?

  • An openmind and the willingness to take baby steps in learning!
  • Have a bare basic knowledge of HTML and CSS.
  • A drive and passion to create charts for the web!

What am I going to get from this course?

  • Be able to create a Donut or Pie chart from scratch on the web.
  • Understand how Chart JS works.
  • Adjust Pie and Donut charts and display them professionally!
  • Create in very easy manner a Pie or Donut chart

Who is the target audience?

  • Students who want to learn how to create charts with Chart JS.
  • Webprogrammers that want to learn a new programming language and to improve their web design skills.
  • Webdesigners that need to use charts for webpages.
  • Data miners that want to use charts to make information visual for the web.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction to creating your own Pie or Donut Chart in Chart JS.

Donut Chart Js

In this course you will learn how to create a donut chart with Chart Js. Chart Js is a quickly growing JavaScript library to display charts on your page. My personal vision is that we will switch more and more to charts on the web as the amount of data increases.

This course will teach you how to make great use and improve your skill as a chart builder on the web. You will learn how to display values in a donut chart in a very unique and appealing way. The main goal is to replicate the chart that you see on the screen.


Donut Chart Js

In this lecture you will prepare with the right documents. Chart Js has a special JavaScript file that you need to download. You can download one of the two files:

  • Chart.js file
  • Chart.min.js file (minimized version, available in the resource section in a ZIP-file)

For this course I will be using the minimized version. It is fully optimized for speed and requires the least amount of kb to download. This is important if your future readers want to see your chart. It always needs to be quick.

In the resource section I placed a downloadable minimized version. However, I do understand that perhaps you want to download the latest version. In that case visit the official list. Link is included in the resource section.

Section 2: Getting started with the pie Chart, creating your own pie chart.

Donut Chart Js

In this lecture you will build the framework. This is a basic framework of HTML that is the foundation of every document. Implement this right away before you continue.

1 question

Let`s test your knowledge of what you have learned so far!


Donut Chart Js

In this lecture you will connect the JavaScript file Chart.min.js (minimized version) to your HTML file. This is truly essential because without it you will not be able to display the charts.


Donut Chart Js

In this lecture you will create the DIV id with the name center. This Div will have an important function later on. It will position your chart in the center.


Donut Chart Js

In this lecture you will create the canvas tag. Chart JS uses the <canvas> tag to draw the chart. In the canvas the chart will be displayed.


Donut Chart Js

In this lecture you will create the first variable named "per1". This variable will save you alot of double work! It will automate specific value and influence how the donut chart will be displayed.


Donut Chart Js

In this lecture you will assign values to the donut chart. In this case we will be working with two specific values. The values have 3 seperate values that needs input as well. Especially the formula will be important with "per1".


Donut Chart Js

Connecting the JavaScript with the Canvas. In this lecture you will connect the JavaScript canvas. This is very important because this will start to display the canvas.


Donut Chart Js

In this lecture you will draw the canvas. You connected the chart and now you need JavaScript to understand the values and draw base on these values a donut/pie chart. You will notice that the chart will become a pie chart. This is because you are using the pie setup. This is fine because with a very simple tweak it will be a donut chart.

With this you instantly learned how to create 2 charts a Pie and a Donut chart.

1 question

Let`s test your knowledge of what you have learned so far!

Section 3: Advanced layout features to make your donut chart professional

Donut Chart Js

In this lecture you willget a quick overview of what you will learn in this section. You will learn

  • How to adjust the background color of a pie/donut chart.
  • Increase the size of the Canvas
  • How to center the canvas so the chart will be centered.
  • How to enble the advanced features of Chart Js by using the pieOptions.
  • How to create the donut chart hole
  • How to remove the white stroke/lines from the chart.


Donut Chart Js

In this lecture you will adjust the background color of the chart. The background color will be a specific grey color. For this we need the HEX color code: #999. You also will notice that the background color will influence the way the chart is being displayed. The color is blending with the chart. Giving the chart a new look.


Donut Chart Js

In this lecture you will increase the size of the canvas. This is important because the chart is right now too small. You will learn how to adjust the width and height of the chart.


Donut Chart Js

In this lecture you center the chart. The chart is right now not properly position. For this you will make use of the DIV center.

1 question

Let`s test your knowledge of what you have learned so far!


Donut Chart Js

In this lecture you will enable the advanced features by using a special JavaScript command "pieOptions". With this you can start using advanced features of any kind. In this course I will limit only to the essentials to create the end result.


Donut Chart Js

In this lecture you will create the donut chart hole. The hole makes a Pie chart look like a donut chart. The size of the hole will be influenced by the value you set. The higher the larger the hole. The max value is 100 and the minimum value is 0.


Donut Chart Js

In this lecture you will remove the white strokes/lines from the donut chart. You noticed that the chart has white strokes. This is normal because it is set as a start. In this cause we need to remove the strokes.

1 question

Let`s test your knowledge of what you have learned so far!

Section 4: Professional layout features, hover effect and text in the center of the chart

Donut Chart Js

In this lecture you get a quick overview of this sections. This section will teach you how to:

  • Create a second canvas
  • How to remove the hover effect from the donut chart
  • How to center text in the middle of the donut chart
  • How to automate the value by using concatenate in JavaScript for your chart.

Donut Chart Js

The second Canvas is important because it is needed in conjunction with the donut chart. Chart.js has some limitations and with this we can create a workaround.


Donut Chart Js

In this lecture you will remove the hover effect from the donut chart. Many people would love to learn this skill and it does have an impact. The hover effect is wonderful but if you want to hide the value because you make a guage like in this course, than it has no value. So we use a special trick to remove this.

1 question

Let`s test your knowledge of what you have learned so far!


Donut Chart Js

In this lecture you will start with the second canvas. This canvas needs to be prepared and ready before we can center the text in the donut chart. You will create a few variables regarding to width and height.


Donut Chart Js

In this lecture you change the font color, font size and font type in JavaScript. You will learn some special commands to use.


Donut Chart Js

In this lecture you will center the value. You want to center the value of the percentage in the center of the donut chart. For this you will use some important JavaScript positioning tricks. This part is always the most work because you need to tweak it by testing many options. This is nothing bad, it just needs some time and patience.


Donut Chart Js

In this lecture you will use a special trick to fully optimize your workflow. No one wants to input the values of anything more than once. This is completely understandable. With concatenate and using the variable "per1" you will complete automate your workflow. All you have to do is just input the value once and everything will align.

Concatenate is a very fancy word for displaying two values in a line. In this case you need to concatenate the value and the percentage sign (%) to make sure it will display properly on the canvas.

1 question

Let`s test your knowledge of what you have learned so far!

Section 5: Conclusion, what you should know and the expected future of data visualization.

Chart Js overview

In this lecture you will get a quick overview of what you have learned. Understand that Chart JS has many more possibilities! In this course scratched only the surface. Keep on learning because Chart JS will develop even more as the future demands more new data visualizers!

2 pages

Chart Js, a reference sheet with all the commands by Udemology.

In this lecture you will have a useful downloadable reference sheet with all the chart commands. There are more different options available and I only scratched the surface. The only way how you can learn is by doing more and more. Discover it because the future is truly wonderful for every data visualizer!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Nicky Wong, Data Analyst, Market Researcher, Data Visualizer!

Nicky Wong is an expert in translating data into market opportunities. Data is his passion, Excel, Databases and Big Data are truly wonderful topics. As an absolute data lover and he is always looking for ways to analyze it. It started with stock market facts and now quickly turned to everything that is unique and different.

However, all the information have one primairy goal and that is "How to use this information to gain a competitive advantage". As a Market Researcher with it roots in Marketing Nicky understands that knowledge is power. Whatever you do make sure you use data at your advantage.


My vision of Data and the future


Why Data visualization matters!

I truly belief that Big Data is giving us all a new obstacle to overcome! Information overload is a serious challenge and with Big Data it only multiplies the issue. If you are a data miner you will know that much data has no meaning if you cannot connect any meaningful dots.

Large chunks of data, reports and tables are not effective. It is impressive to get a huge database but it is demotivating for others to read data. The biggest data trend is increasing this issue! Big Data = Information Overload x 10.

From (Digital) Information Age to the (Digital) Understanding Age

A data analyst can analyze data but the most important skill is Data Visualization! These so called "data visualizers" will develop a new skill gathering meaningful information and present it in a very understandable and effective way.

The issue is not anymore the data but the way to give meaning and communicating meaning to others. The person who can do that will have a huge advantage in the so ever growing Big Data world.

Big Data is here! Data Visualizer is on it`s way! In all of my courses I use techniques to create understandable data and present it in an impactful manner.

Ready to start learning?
Take This Course