ChartJS Legend
0.0 (0 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.
2 students enrolled

ChartJS Legend

ChartJS Legend Course, examples and explanations
0.0 (0 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.
2 students enrolled
Created by Nicky Wong
Last updated 8/2018
English
English [Auto-generated]
Current price: $51.99 Original price: $74.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • 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
  • Use the settings that ChartJS 2 has build in for legends.
  • Create a customize HTML legend with ChartJS 2.
  • Using onClick or onHover functions in legend of ChartJS 2 to give their charts more interactivity.
Course content
Expand all 40 lectures 01:48:30
+ introduction to ChartJS 2 Legend
1 lecture 02:34

ChartJS 2: introduction to ChartJS 2 Legend

In this video a quick introduction of what you will learn and why this course was created.

Preview 02:34
+ ChartJS 2 Legend: Learning how to use the basic option legend [Beginner]
4 lectures 09:59

ChartJS 2 Legend: Beginning of basic legend settings.

In this section we start with the basics of the ChartJS 2 legend settings. This basics are required before you continue with the next sections.

Preview 01:20

ChartJS 2 Legend: How to display the legend

In this video you will learn how to display the legend. ChartJS gives you the option where you can decide if you want to display the default legend or not.

Preview 03:08

ChartJS 2 Legend: How to control the position of the legend.

In this video you will learn how to control the position of the legend. ChartJS gives you the option to reposition the legend. Options are

  1. top

  2. bottom

  3. left

  4. right

Preview 02:18

ChartJS 2 Legend: How to set the reverse order of the legend.

In this video you will learn how to reverse the order of the legend. ChartJS has some build in options. With this you can reverse the order of the legend.

Preview 03:13
+ ChartJS 2 Legend: Learning how to use legend label object [Semi Beginner]
12 lectures 23:10

ChartJS 2 Legend: Introduction to legend labels object.

In this section we will go deeper with label objects.

Preview 00:58

ChartJS 2 Legend: Adjusting the boxWidth (size of the colored boxes in legend)

In this video you will learn how you can learn you can adjust the width of the colored boxes of the legend.

ChartJS 2 Legend: Adjusting the boxWidth (size of the colored boxes in legend)
02:04

ChartJS 2 Legend: Adjusting the font size of the legend.

In this video you will learn how to adjust the font size of the legend. ChartJS gives the legend a very small font size. You might want to expand that. In this video we will expand it.

ChartJS 2 Legend: Adjusting the font size of the legend.
01:12

ChartJS 2 Legend: Adjusting the font style of the legend.

In this video you will learn how to adjust the font style of the legend. The options are:

  1. 'normal'

  2. 'bold'

  3. 'oblique'

  4. 'italic'

While the difference between oblique and italic are hardly noticeable, there is some difference, curious? Read the wikipedia in resource section. They both have the same mark up.

ChartJS 2 Legend: Adjusting the font style of the legend.
02:46

ChartJS 2 Legend: Adjusting the font color of the legend.

In this video you will learn how to adjust the font color of the legend.

ChartJS 2 Legend: Adjusting the font color of the legend.
02:05

ChartJS 2 Legend: Adjusting the font family of the legend.

In this video you will learn how to adjust the font family of the legend. While this adjustment is easy I will also explain which font family you should consider for your chart. Goes slightly deeper in Sans Serif and Serif font types. Curious about Fontology? See the resource link.

ChartJS 2 Legend: Adjusting the font family of the legend.
03:25

ChartJS 2 Legend: Adding padding to the legend.

In this video you will learn how to add padding to the legend.

ChartJS 2 Legend: Adding padding to the legend.
02:07

ChartJS 2 Legend: Creating automatic point styles for legend.

ChartJS has the option to add point styles instead of a standard block. This is useful for design because it matches with the style of the point on the chart.


ChartJS 2 Legend: Creating automatic point styles for legend.
02:51

ChartJS 2 Legend: End of semi basics legend settings.

Now you have a clear understanding of the semi basics of the ChartJS 2 legend settings. The next section we will go in a few more complicated items. You have now a solid foundation to continue.

ChartJS 2 Legend: End of semi basics legend settings.
00:47

ChartJS 2 Legend: End of basics legend settings.

Now you have a clear understanding of the very basics of the ChartJS 2 legend settings. The next section we will go in a few more complicated items. You have now a solid basis to continue.

ChartJS 2 Legend: End of basic legend settings.
01:33

ChartJS 2 Legend: Challenge Exercise 1

In this video you will get a challenge exercise to practice what you have learned in this section. Good luck with the exercise. There is something wrong with this persons boxWidth. Can you solve this?

ChartJS 2 Legend: Challenge Exercise 1
01:23

ChartJS 2 Legend: Answer 1

In this video you will get the answer of the ChartJS 2 Legend exercise. This is a simple challenge. Hope you knew the answer.

ChartJS 2 Legend: Answer 1
01:59
+ ChartJS 2 Legend: Learning how to use functions in legend [intermediate]
7 lectures 21:01

ChartJS 2 Legend: Introduction with functions in ChartJS Legends.

In this section we will start exploring functions in the legend. This is a more advanced topic and can be fun. With this a lot more new doors open up.

ChartJS 2: Introduction with functions in ChartJS Legends.
00:54

ChartJS 2 Legend: Working with onclick functions in ChartJS Legends.

In this video you will learn how to use the onclick function on your legend. A onclick function is a trigger the moment someone clicks on the legend.

ChartJS 2 Legend: Working with onclick functions in ChartJS Legends.
03:08

ChartJS 2 Legend: Working with onhover functions in ChartJS Legends.

In this video you will learn how to use the onhover function on your legend. A onhover function is a trigger the moment someone mouseover on the legend.

ChartJS 2 Legend: Working with onhover functions in ChartJS Legends.
01:27

ChartJS 2 Legend: Color change with onhover functions in ChartJS Legends.

In this video we will now do some color changes the moment someone mouseover on the legend.

ChartJS 2 Legend: Color change with onhover functions in ChartJS Legends.
03:49

ChartJS 2: The restrictions of onclick and onhover functions in ChartJS Legends.

In this video you will understand the restrictions of the onclick and onhover functions. There are some restrictions and to really get rid of those you have to move over to the next section.

ChartJS 2 Legend: The restrictions of onclick and onhover functions.
03:07

ChartJS 2 Legend: Challenge Exercise 2

In this video you will get a challenge exercise to practice what you have learned in this section. Good luck with the exercise.

ChartJS 2 Legend: Challenge Exercise 2
01:28

ChartJS 2 Legend: Answer 2

In this video you will get the answer of the ChartJS 2 Legend exercise. This exercise is a real challenge and I was even considering to remove it. However, doing this will make you really good and you learn some practical use. If you solve this trick question you are really good at ChartJS! 

ChartJS 2 Legend: Answer 2
07:08
+ ChartJS 2 Legend: Learning how to create a customized HTML legend [Advance]
14 lectures 48:50

ChartJS 2 Legend: Introduction to HTML legend.

In this section you will learn how to create a HTML legend. ChartJS has a special designed function for creating a HTML version of the legend. In this part we will go deep in advance options.

ChartJS 2 Legend: Introduction to HTML legend [Advanced].
01:25

ChartJS 2 Legend: Generate a HTML legend with generateLegend.

In this video we will start simple with the generateLegend function.

ChartJS 2 Legend: Generate a HTML legend with generateLegend.
04:24

ChartJS 2 Legend: Designing the legend list style.

In this video we will start adjust the preset list style design. Once you generate the legend ChartJS will create a default html tag structure. We will start designing it.

ChartJS 2 Legend: Designing the legend list style.
04:43

ChartJS 2 Legend: Displaying the span in the legend.

In this video you will learn how to display the span in the legend.

ChartJS 2 Legend: Displaying the span in the legend.
03:37

ChartJS 2 Legend: Using the legendCallback Function to create our customized HTML legend.

In this video you will learn how to create a customized HTML legend. We make our own design from scratch.

ChartJS 2: Using the legendCallback Function to create a customized HTML legend.
03:22

ChartJS 2 Legend: Adding the UL tag of the customized legend.

In this video you will learn how to place the first tags of our customized legend. We will use here the JavaScript codes:

  1. Array for values only using brackets '[]'

  2. Using .JOIN to display an array in a string

  3. Using .PUSH to add values to an array.

ChartJS 2 Legend: Adding the UL tag of the customized legend.
06:12

ChartJS 2 Legend: Creating a loop to get the li tag of the legend.

In this video you will create the loop for the list item of our customized HTML legend.

ChartJS 2 Legend: Creating a loop to get the li tag of the legend.
07:29

ChartJS 2 Legend: Adding labels to the customized HTML legend.

In this video you will learn how to add labels to the customized HTML legend. Now we want to improve the legend with getting the values.

ChartJS 2 Legend: Adding labels to the customized HTML legend.
03:27

ChartJS 2 Legend: Adding colors to our list items.

In this video you will learn how to add the colors to the list item. We want to make sure ChartJS automatically obtains the colors that matches with the chart. 


ChartJS 2 Legend: Adding colors to our list items.
Processing..

ChartJS 2 Legend: Showing more option with to the customized HTML legend.

In this video we will show you some more options what you can do with a customized HTML legend. Since we can add classes and all kind of things what you want. All you need to do is concatenate correctly.

ChartJS 2 Legend: Showing more option with to the customized HTML legend.
02:40

ChartJS 2 Legend: Challenge Exercise 3

In this video you will get a challenge exercise to practice what you have learned in this section. Good luck with the exercise.

ChartJS 2 Legend: Challenge Exercise 3
01:05

ChartJS 2 Legend: Answer 3

In this video you will get the answer of the ChartJS 2 Legend exercise. This was a very easy exercise. So it should be simple to answer. If you did struggle what is going on you need to go back and rewatch the videos.

ChartJS 2 Legend: Answer 3
01:42

ChartJS 2 Legend: Challenge Exercise 4

In this video you will get a challenge exercise to practice what you have learned in this section. Good luck with the exercise.

ChartJS 2 Legend: Challenge Exercise 4
00:44

ChartJS 2 Legend: Answer 4

In this video you will get the answer of the ChartJS 2 Legend exercise. This one is far more interesting but it should be very familiar. Struggle to read the code? Practice more!

ChartJS 2 Legend: Answer 4
08:00
+ Final Section
2 lectures 02:56

Got suggestions for this course? Let me know!

Im open to ideas and topics that you want to see in this course. If you got items you want to know more about please let me know.

Got suggestions for this course? Let me know!
00:11

ChartJS 2 Legend: Closing Video and what is coming soon!

In this video I will give you some useful tips and what you might expect coming soon. As this course is being updated on a monthly basis.

ChartJS 2 Legend: Closing Video and what is coming soon!
02:45
Requirements
  • Basic knowledge of HTML
  • Basic knowledge of ChartJS 2 (You should know how to make a (basic) chart)
Description

ChartJS Legend Course, examples and explanations.

Learn how to create legends with ChartJS fast.


ChartJS 2 is really an interesting topic. However, maybe you notice it as well. ChartJS 2 legends can be complicated and understanding how it works is a big challenge. When I learn this I was really challenged. It is hard to understand and the amount of explanation if limited and not clear. After many weeks of trail and errorI finally started to understand it. Now I can finally create it with ease and understand how to read it as well. Once you know this you will notice that the ChartJS 2 documentation becomes easier to understand as well.

ChartJS documentation is a struggle and does not really cover all the aspects of it. There are so many nice and useful functions and things to do. In this course you will learn and explore these functions and you will create your own HTML legend the right way.

We will be handling this step by step and explain all the codes as we go along. Once you really understand the key concepts you will be able to create it yourself quickly.

Hope you are ready and excited to join this journey to ChartJS 2 Legend.

Let`s begin!


Who this course is for:
  • Students who want to improve their ChartJS skills and take it to the next level.
  • Students who are trying to figure out how to create customized HTML legends with ChartJS.
  • Students who struggle reading the official ChartJS documentation and need something easier.