- 2 hours on-demand video
- 1 article
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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.
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.
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.
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
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.
ChartJS 2 Legend: Introduction to legend labels object.
In this section we will go deeper with label objects.
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:
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 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: 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: 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: 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: Adding the UL tag of the customized legend.
Array for values only using brackets ''
Using .JOIN to display an array in a string
Using .PUSH to add values to an array.
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.
- Basic knowledge of HTML
- Basic knowledge of ChartJS 2 (You should know how to make a (basic) chart)
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.
- 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.