Getting Started With Chart.js

In this video we will take a peak at Chart.js which is a JavaScript library for creating beautiful charts and graphs and inserting them into your HTML. It can be used to create around 8 different types of charts including bar, line and pie. This tutorial is extremely beginner friendly
CODE: Code for this video
www.traversymed...
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
www.paypal.me/t...
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy

[@nlburnr1]

Man I'm always filled with joy when you upload a new video , Its always a back and forth between your channel and the documentation when I try to pick up on a framework, library etc. Thank you for making my learning process a hell of al lot easer thank you man. Much love from Rotterdam (Europe , The Netherlands)

[@TraversyMedia]

Thanks :) That's awesome because that is the goal of this channel is to be an ongoing resource for web developers and programmers. No bullshit just simplified explanation and examples

[@AhmadZul]

Agreed. Straight to the point~

[@abishekraju4521]

the comment's got 96 likes and Brad's reply's got 69 likes. Being a man of culture I can't disturb that balance even if I wanna express my agreement : )

[@shrutirajpoot6310]

@@TraversyMedia hey , it would be a great help if u can can tell how to download these charts into pdf, i used making canvas and then adding it as an image and then export using jspdf, but all i get a chart with xy axis but no bar charts

[@WeedsePoentah]

@@abishekraju4521 😂😂😂😂😂😂 this the reason is why i spend 99% on the internet

[@lehlohonolomphuthi4]

I think in the past 2 months I've watched more TM content than anything! Dude God bless you and your family. You are simply fantastic.I haven't event watched this video yet.

[@TraversyMedia]

That's awesome. I appreciate it, thanks!

[@SimPwear84]

Brad you're just killing it lately! I am learning so much from you. Thanks for your time in putting these together. Awesome as always. Blessing hommie!!

[@TraversyMedia]

Your welcome man, thanks for watching

[@boev999]

This channel reminds me of a song... "Anything I want - you've got it, anything I need - you've got it". Thanks a lot and greetings from Bulgaria.

[@syedmuhammadsajjad3393]

I am never disappointed by your videos. Even a 3-year-old video worked like a charm. Thank you.

[@haleykimbrough2373]

i feel like im high right now. i've been researching charts for hours and days and this is the first chart to work for me. thank you so much

[@georgianalinalexandru9533]

I was just thinking on see what Chart.js is about and here you apear with this tutorial. Thanks man !

[@UstadJi]

I Don't Have Words To Say Thank You To You, Brad. Without You Internet Is Nothing, You Are An Inspiration For Us. Thank You Thank You Thank You Very Much.

[@studiocity10]

Quickly becoming one of my favorite youtubers man.. Thanks for the great content!

[@TraversyMedia]

Thanks :) That's awesome

[@IsaacAsante17]

You simplified it again for all of us. Keep it up, I really like your videos. Great teacher.

[@bread639]

Searched the internet for minutes and this is the best resource. Well done

[@DakiMC]

Great tutorial, thank you very much!

[@jsuresh]

Thank you for making learning easy Traversy Media. I've been watching a couple of your videos in a row now.

[@domenickdagostino8494]

Loved learning Chart.js! My immediate thought was linking this up to my SQL database with PHP to create a dynamic chart. Would love a video on that!

[@ammarhassan_]

U did the best explaining than charts.js official documentation. Thanks!

[@omer8836]

Haven't watched the video yet, but I needed a tutorial on chart.js for some project, great work, thumbs up already ;)

[@krowwweee2918]

I just gonna like without even watching, but will definitely do later.

[@juancamiloq1]

same thing

[@EidosGaming]

Bet you didn't

[@divinity5250]

Did you watch it?😅

[@krowwweee2918]

@@divinity5250 Not yet, brad is making too much stuff to handle for me :)

[@divinity5250]

@@krowwweee2918 hahahahahahaha 3 yrs down the line 😅😂

[@JohnCrossman]

Needed to do a quick mock-up to get a project off the ground. This tutorial was brilliant and helped me get everything done in an afternoon (I am not a coder by any stretch of the imagination). Many thanks!

[@danieladetayo3711]

As long as it is from Brad, you know it will be good.

[@TraversyMedia]

Ah, the pressure :) thanks for watching

[@bazz6932]

Finally ...been looking for this from traverse

[@matiasleivar]

Thanks this tutorial is so clear, i've learned how to use this library in 15 minutes. Thanks again

[@CoinSEO]

Hi Brad, It is unbelievably great to FINALLY!!! be able to make charts (what I call graphs - sorry, I'm an engineer) online and add them to my dynamic websites. One small thing - I find that none of the options are working for me, whether global or otherwise. But it's 5 years later, so no doubt something has changed... If you could update or answer this, it would be fantastic!! Thanks either way! Traversy ROCKS!!!

[@ruhaise]

I'm so glad that i found out this channel, all the videos are very nicely explained(neat and simple), big thumbs up man!!!

[@Chandasouk]

Ah, I wish I found your D3 tutorial back then. I learned it on the fly at work for a project and just read random tutorials half the time lol.

[@Devil_EMS]

Listens for five seconds: "This guy is so from Boston" Listens just past the one minute mark: "BOOOOOOOOM! CALLED IT!"

[@Born2Gamble123]

Man, Traversy Media is like its own google database. I can search 'How to cook a steak +traversy' and i bet you'll have a tutorial on it.

[@Ic3B4g]

Super useful, although there are a few things that have changed since this tutorial was made. Notably the title has to be nested within plugins, it can't be put directly into options. fontSize has also been replaced with font: {size:}, and so on. That stuff was easy to look up though, and this video definitely gave me a way better understanding of how to use the library than I had before.

[@juancamiloq1]

Just passed by to say Hi! I really love your channel, always learning. Keep going man, you're awesome! 1 question tho... no more videos about Rails?

[@TraversyMedia]

There definitely will be. I know I am lacking in Rails videos. I just find them time consuming. I did a couple I was not happy with so I didn't upload but I promise they are coming

[@juancamiloq1]

Traversy Media thx man! looking forward to see it ;)

[@itsumarejaz]

always pleasing to watch your tutorial. Brad. Love you!

[@ErnestGWilsonII]

I can't believe it, early on he said there would be 8 chart types and then later on there was only 7, I guess I will tell the kids there will be no Christmas this year! Just kidding of course, another awesome video! I am of course subscribed and thumbs up!

[@FrankDuxful]

Congratulations Mr Traversy, thanks, very good!

[@Terropico]

I have just started learning it yesterday and you already uploaded a tutorial.Good stuff :)

[@captain_finn]

This video rules for beginners. Thanks for putting this out!

[@iancarr3923]

I am setting up a dashboard so this is very helpful. BTW your pronunciation of "Worcester" is correct. It is pronounced like that in the UK and Worcester has been here longest!

[@valuedtutorials]

Hey brad thanks for all these videos.Learnt so much from you :) This is one of my favourite channels on KZbin. Please make a series on Yii Framework and if possible make some videos on Algolia Search with Laravel.

[@takethefirststepsem]

You make the complex simple. Thank you for the tutorials. This is super helpful.

[@rashidanwar101]

@Brad, your content always suffice me. Nowhere it feels something is missing in the video (At least its enough to find the next roadmap).

[@castmixer12]

Thank you brad. Please do one with php and sql 👍🏻

[@raven1552]

noonne use that hahaha

[@MeshTheSnake]

Absolute legend, appreciate all the effort you put into this content.

[@Amanda1799]

This video made Charts.js fun and easy! Thank you Brad!

[@john7556]

Absolutely brilliant video: clear, to the point and very effective. Much appreciated.

[@LarryG-Unit]

Digging the new intro animation! Awesome!

[@JoshuaMusau]

This man is a legend...

[@nandk98]

Thanks for this Video. It's comprehensive and highlights all aspects of presenting data visually. Though new to Chart.js, I am rearing to integrate it in my dashboard project. Of course, I would check the latest documentation. Thanks again for kindling my interest.

[@Kunal-jp8tn]

Thank you so much for this amazing chain of tutorials....

[@BenKopec]

Amazing! I learned so much from watching your video, and actually creating the widget. Also had a lot of fun. You really helped glue together a lot of questions I had. Thank you so much!

[@martinmtandi335]

doing my final year project, will definitely make use of this. awesome stuff. Thank You so much

[@afetsibless9212]

Nice and concise video. Bro keep doing more of that. Love it to the max!!

[@aris.konstantinidis]

Crystal clear explanation and a solid and simple implementation example,. Thank you so much.

[@djdisconap]

Great video as usual Brad. Quite outdated but if you search the docs for the options it is pretty straight forward. Some options are nested within a plugins object and the global options are written differently. Overall a great video. Would love to see a video of this integrated into React.

[@ManpreetSingh-bk7yc]

Need a new video

[@lardosian]

This could be a great way to expand a JS budget app I'm learning with Udemy, thanks Brad!

[@lardosian]

Thanks Brad, gonna use this Chart.js in my Django project. I used Bokeh in my last flask project after seeing your video.

[@PS4TUBE]

wow , it's amazing for any developer :) , with a simple explanation .. thanks .

[@williamwhatley4157]

You're great man -- I enrolled in your Modern JS + ES6 course on Udemy; highly recommend. Thanks Brad

[@EmmaMaryTaylor]

Love the way you say Charts! Thanks for the video - very useful :)

[@satyajeetjha1681]

wow .can read docs now after this short demo.

[@darkness485]

Great video bro, this framework is really excellent. I'm actually thinking of starting a project now just to play around with it.

[@TheD2D21]

Thanks for this tutorial, man. I was using Google Charts. I feel pretty confident in giving this lib a try now!

[@MrNikas99]

Hey, I've been watching your channel for a while now and I really like your content, I learned a lot from you, love the way you simplify everything, and make it look easy! Could you please make an Angular 2 project with MySQL and php, for the people who don't want to learn laravel at the moment but still want to learn how to use angular 2 with databases other than noSQL, I would really appreciate that!

[@icex91]

would like to see that too

[@hanankevich5762]

Nice vid - I'm about to use chartjs in my work project and now I feel like chart expert :) -thanks again!!!

[@christopherigbojekwe5966]

wow, this video might've just changed my life. This is so cool! Thank you!

[@yinonb172]

Helpfully video with simple explanations. Thanks !

[@SameerKhan-ls9ow]

options: { plugins: { title: { display: true , text: "hihgwohgro" } } } we use plugins now for the title in updated versions

[@Dankschon]

Thx man, that helped a lot.

[@ahmedfathi4864]

Thanks, what about the title fontSize? its not working

[@slavomirkapusta6128]

Thank you for for tutorial. I am beginner and video helped me a lot. Slavomir, Prague (another user from Central Europe ....)

[@munapadhi8723]

good job brad i love your all videos with great teaching experience . keep it up and good bless you.

[@jeremybrews2521]

This was really fun, thanks for the great tutorials. Keep up the great work brother.

[@QWEEKEN73]

Hey bud, thanks for the upload. Your videos have me taught quite a lot as an aspiring developer. I do have one concern tho, your videos seem to be all over the place, covering a wide array of frameworks. I understand that each new arising technology has it's own viable circumstance, and it's important to have a go to tutorial for them. But it would be nice to see more commonly used technologies covered in greater depth. Self taught developers rely immensely on the content that fantastic people like yourself generously put out. I feel that developers first going into the work force should be skilled in 2-3 technologies rather than a master of none. Just a thought. Keep up the good work! Thanks.

[@andy212251]

Still works 5 years later :D !

[@kevinzhang8974]

yes, ChartJS is very simple to use and configure .... for normal chart job, this is super!!!!

[@simonburyan1669]

thx brad, all i needed was first 6 minutes, rest is in the documentation. thx ;-)

[@stevelandsaw3132]

Fantastic. Thanks for taking the time to post this.

[@metromota]

Thanks from Brasil, you save my life. :D

[@brenodonascimentosilva507]

salvo a minha também

[@alivarfan1009]

I really enjoyed watching this tutorial, you described everything very well, thanks.

[@monochrome9229]

wow just right in time, being looking for this tuts for a while, can you add a realtime chart course later with chart.js

[@DallasVocals]

And I have a chart on my newest design. Thanks Mr. Traversy. I'm now looking for a vid on tying my latest array results to the chart. Then I will be a 'done genius'. ;)

[@rosscarrick]

Very clear and easy to follow. Great video!

[@cunningham.s_law]

keep grinding man I love your stuff

[@geraldwatanabe2228]

Another awesome tutorial! Clear and concise!

[@MenAtWorkMedia22]

Thank you, Brad!

[@michaelhenry4667]

Helped me to kickstart my journey

[@premiumdjmelvyn]

You are an amazing teacher!!!

[@Se-pk8lg]

I love your content it is just easy to follow and well explained. Keep it up!

[@aditamadirga6571]

Thanks for your kind to made this awesome tutorials.

[@ikeyfranco1001]

Thank you for great content. you are amazing person and developer - once in a generation

[@andrewrico8321]

i love this guy

[@TraversyMedia]

I love you too

[@worldwrestlingentertainmen883]

hi, my name is yasir, i have applied the same code you write but m y browser doesn't show anything. it's absolutely empty. when i go to dom it shows like cavas it having auto width and height but doesn't show any thing. Please help me in this regard. Thanks.

[@llucafortunato]

love the intro sound

[@xs6819]

9:11 I'm glad it worked for you because I cant get anything but a blank page. I see the download page is no longer working either.

[@nafizahmed1983]

Man love u so much. U made it like a piece of cake. Have no words to appreciate you....

[@BoilersRock]

Thank you for this. Also, thank you for clarifying how folks from your area pronounce "Worcester" @ 8:05 :)

[@kayodeemmanueladetunji3367]

Thanks for the upload. I always crave your videos

[@sroger]

Good video. Learned what I needed to get started. Thanks!

[@my_dixie_rect8865]

Amazing video. You're such a good tutor. I subscribed and thank you greatly!

[@yashone7]

Simple, Elegant and excellent.

[@SALMANKHAN-zz4gi]

thank you brad ! you are amazing sir

[@bogdyvyp]

thanx for the video it helped a lot lol @ 8:00 reminded me of the Louie CK Boston accent joke

[@astatalol]

You just saved my life, thank you so much!

[@shahmirjadoon1322]

Nice work Brad, Also make some videos on highcharts.js

[@goodwizard8598]

I just came here to say thank you.

[@baptistehyver1162]

Thank you so much for this video, it's great to get started with Chart.js