Data Display With ApexCharts | Vanilla JS & React

[@Ash-em5pm]

Bro do you even sleep ? It's been like 40 hours since you uploaded a 4 video series and now here's another. How do you do create content so fast buddy? You and Your workflow are freaking amazing.

[@TraversyMedia]

:) yeah I sleep. I work about 9 hours per day, maybe 10 some days. I really enjoy what I do which helps a ton. Don't get me wrong, I do feel burned out at times just like anyone, but overall I do exactly what I want to do in life which is coding and helping people

[@Ash-em5pm]

@@TraversyMedia thanks a lot for all the hard work that you do my friend. Without you , people like me would have never endeavoured to learn CS and programming . By the way the django course is really amazing, thanks for that too.

[@valentinkhomuteno6825]

Did I get it right - this blog is your full-time job?

[@tonimaunde]

You are a great Teacher. Thanks to you i am close to finish a real app using Vue js and a Laravel API.

[@arrowb]

its passion bro.... it passion that keeps pushing and pushing you..

[@mp3mitchp3]

Traversy is my secret weapon for looking like I know what the hell I'm doing. Spoiler I have no idea what I'm doing. Thanks dude!

[@AsifMehedi]

What a find. I'm blown away by how quickly I can get a beautiful and polished chart up and running (up and animating?). I'm going to spend this weekend to make something impressive. Thanks for bringing this to our attention.

[@Eupolemos]

That not-statement in the end blew my mind. Simple and awesome.

[@cloudagnostic]

Was watching a c++ video and a Traversy notification popped up. Now I’m here!

[@tkdevlop]

cherno?

[@cloudagnostic]

Nope. it was D. Banas

[@giftedfingers2580]

C++ is just a monster good luck man

[@tkdevlop]

@@cloudagnostic cherno is best for cpp and graphics programming.

[@giftedfingers2580]

Brad it's time for The Traversy Media podcast show...

[@argeelearner3978]

Brad started recently for his patreon's www.patreon.com/traversymedia/posts

[@nataliagolubeva4726]

Thank you for the nice introduction. Working for the project and its my first experience with the charts. Your explanations are neat and clear. Its very helpful video for my work

[@andresfelipeh7586]

you are one of the best teachers of youtube, awesome, thank you very much.

[@romimaximus]

wow, i thought it would be more dificult than this...but you nailed it...awesome..thnakx Brad...you´re the man...thankx for sharing it..!!

[@andresmontoya7852]

Awesome! And one thing to mention, you can use the state without the constructor, like this: state = { options: [], name: {} } And that's it!

[@karsongrady]

Thank you. If you would ever do a full video and/or paid course that showed how you can have data for certain users and depending on who is logged in, it shows their data in these super nice charts and that dashboard that you showed. That would be nice for me. I have aspirations of building an admin panel for a survey data visualization application and I have no real experience except following along to your videos for fun. Thanks again for all the great stuff.

[@ionut1234567891011]

hello brad, i want to thank you for everthing ! much love and health for you and your family!

[@md.akib5124]

love you brad and love your every tutorial.

[@pramodkhatri840]

Can we have a tutorial where we can learn to render dynamic data rather than static ones?

[@damienminter1999]

Awesome demo - exactly what I was looking for

[@CerealTuesday]

Yet another awesome tutorial, cheers Brad! I honestly don’t know how you find the time, I can’t keep up with just following along with your videos never mind producing great content. I’ve not long since bought your Python course, can’t wait to get started👍 Again, superb stuff👌

[@ParanoidNotAndroid]

perfectly paced and detailed ! thanks a lot

[@denissanchezleyva8954]

Brad, I clicked Like before Watch this video. Really You Never disappoint me. Congratulation Man. You are my favourite Instructor.

[@nigerianairbender3609]

Thanks for everything Brad. Please we need an in depth video on react native. Even if it's on udemy, we'll really appreciate.

[@cubeermaui]

Awesome video as always. Can't wait to use this in my project.

[@la_place684]

I tried doing pretty much the same thing with d3 but this is much easier! Thank you

[@camzpras3435]

Brad once I make money from my Apps, I will definitely donate to you on Patreon. I have learned so much from you.

[@RealParadox85]

Yeah Brad, this is nice! A little Javascript Data Visualization course would be sick too, LOTS of React jobs I have been applying for lately seem to want that. I have some experience with React Sparklines data charts, but this seems cooler.

[@its_magnetic]

Thank you. Love and Respect from Sikkim, India.

[@matthenley6704]

Love your videos, Brad! You are the master

[@douglasbrandao391]

that video was awesome brad, thank you so much!!

[@aidaneglin781]

Jesus christ dude you're on some next level shit. Truly amazing.

[@ArtisanPvP]

Nice video. Pretty good explained. I am not so familiar with react. Can i ask what is the advantage to make it in react instead of vanilla js?

[@Alessandro-nq3tm]

Thank you Brad ! I think i will change from chart.js to apexchart because has a lot more options

[@n_fan329]

Alessandro same here !!!

[@seanmelodi]

Hello. Do you know where I an find a bell curve chart from npm? Thanks😊

[@fakeapplestore4710]

Lmao this channel is gonna hit a million so fast

[@gaborszekely8387]

Hey Brad, I have a question for you, if you don't mind me asking. I am currently new to programming and am having a great time learning new languages and working on projects on my own. However, I have a fear that if I go into the field professionally, it may destroy my passion for coding and leave me unable to enjoy my job. Do you think this is a valid concern, and if so, what can be done to abate this? Cheers, and thanks so much for all your great content! Gabe

[@chamodnimsara7054]

hats off.... you are like a god to me ! keep this up man..... truly amazing work

[@matteobarbieri2989]

Nice video Brad, just a little remark: you changed the color in pink/red but the tooltip circle remained blue

[@junedchhipa]

That's because Brad changed options.fill.colors property. There is a generic options.colors property which targets all elements' colors (bars/markers in tooltip) . You should use that one :)

[@faisalamin001]

So useful resources, thanks a bunch sir 😊

[@aaxk]

this is niceeee. thanks for the upload mate. I appreciate it.

[@ViditKothari]

Hi, I need help; sincerely need answer to this (I have been searching and trying as much possible): ChartJS vs ApexCharts Isn't ChartJS' documentation awful ?

[@tamalmondal8550]

Can you tell me what is the best(according to you) js library for adding charts? you have used chart.js, apexCharts, d3.js, etc. There are so many options so I need some suggestions, I am using angular for frontend which requests a backend API for data, Thanks for all the great tutorials! :)

[@danielbabu6010]

Now I am Happy ! Thanks ----> Brad !

[@greenarrow6689]

Brad carry on your great work...

[@sankarnatarajan9343]

Hi Man, nice tutorial and interested to try the annotation part. How do we dynamically add the annotation for Xaxis dates? Especially, the same annotation for multiple occurrences.

[@hrudayd7665]

Hi Brad, Thanks for teaching us, Your are like God gift for us. If possible Please do videos on jasmine testing in angular (spec.ts) file please no videos in your channel and your courses and KZbin also not much clear on this.

[@jonathansolis8913]

Hey brad, what made u decied to change to MaxOS over windows?

[@themoon51]

For anyone wanting to conditionally display 'Vertical' or 'Horizontal' text for their button {this.state.options.plotOptions.bar.horizontal===false?'Horizontal':'Vertical'}

[@jatinraj4974]

Full vanilla js based API project (Eg- giphy API)😍😅😅😅

[@peoray]

He has tons of similar videos, just check out his previous videos or the JS playlist

[@matthewtetley7048]

Could you possibly do a react or angular video utilising a testing framework as well possibly as part of a series

[@pcgs_]

Great Tutorial Brad! Do you suggest any library for React Native?

[@tkdevlop]

For UI react native elements for navigation react navigation(V2) most good once come bundled with expo :)

[@pcgs_]

Thanks and for charts?

[@simonndungu1196]

Brad the machine, Thanks as always, Vue guys !!

[@jagadeeshmanoharan9613]

Dear Brad, what will be your next Udemy course???? Can we expect some Java or C# contents?

[@305bwoy]

Can you do a deeper dive to this for dashboards,etc?

[@rosdaravattanak9691]

Thanks for your awesome tutorial sir, and I had an issue when I'm trying to integrate it into my existing project then it doesn't work after that I'm going to create a new react app and it's work.....What's the problem of this issue sir?

[@johncaipa]

Great video, do you have one with maps and react?

[@sergiolima2391]

Hello friend! There is some way to have a fixed Yaxis in a scatter chart? Do you know anything about it? tks a lot!

[@Quetzalcoatl0]

ApexCharts vs Charts.js ? Currently i'm using Charts.js but i have some problem with it. I don't have some of the functionality that i think ApexCharts has. How well it copes with the window resizing? Is it mobile friendly? Is it easy to change the data on the fly ?

[@junedchhipa]

Quetzalcoalt Apexcharts automatically resizes itself on window resize. There are responsive media queries by which you can configure different options for different screen sizes. Also, it is very easy to change data. You have to call updateSeries method. If you use React, it does update automatically on prop change. Disclaimer: I am the maker of ApexCharts.js

[@Quetzalcoatl0]

Then i'm switching to ApexCharts.js, using Vue btw. ^_^. I'm having too many problems with Chart.js

[@mystickid1]

@Brad Would you mind sharing your vscode settings and extensions? Really like your setup. COuld be a video if you want too. Thx

[@deEugene]

cool and simple, thanks!

[@crimsontiangco9286]

Thank you, Please create pagination tutorial using express, mongoose ejs or handlebars thank you Brad 😁

[@michaelzucker772]

Hi Brad. I very much appreciate you videos and have purchased your Udemy courses. One question about the setState for the toggle near the end. I see you passed an object instead of a function. Does it matter anymore? Would it be preferred to call setState((prevState) => { //other state items here, !prevState.options.plot.optionsBar.horizontal}) this way? Thank you!

[@PsychoGod9898]

Yes, the function call would usually be better. The reason for this is, that setState is asynchronous. So if you have multiple setState commands after each other, you cannot be sure, that this.state already contains the changes from the last setState call.

[@vincentnguyen4894]

Really nice tips, is it possible to do the same in react native ? using google analytics ? thanks :)

[@davidasiamah2898]

I need help populating the series with dynamic data. As it is now when I pass a mapped object to it it returns an error

[@laalithaindrajith5708]

Does anyone know how to change the color according to the changes that we did using fill.color values? Because i tried to change the colors using fill.colors option, the bar colors were changed.but the tooltip colors weren't changed..

[@Archil1997]

29:00 Manipulating the state this way generally is a bad practice because of the way React updates it's state. React may batch multiple setState calls into a single update for performance, so this.state may not be updated yet. React docs reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous recommend using a function in setState instead of an object. Function will recieve previous state as the first argument. So instead of writing: this.setState({ options: { ...this.state.options, plotOptions: { ...this.state.options.plotOptions, bar: { ...this.state.options.plotOptions.bar, horizontal: !this.state.options.plotOptions.bar } } } }) You will write: this.setState(prevState => ({ options: { ...prevState.options, plotOptions: { ...prevState.options.plotOptions, bar: { ...prevState.options.plotOptions.bar, horizontal: !prevState.options.plotOptions.bar } } } }))

[@workflowinmind]

29:01 You should not use state in setState directly, as it's async you are not guaranteed the state value is right.

[@stergiosk6064]

Coolest instructor on the Web. Fastest also!

[@simbajonrenzbryan7047]

Hi! Is there a function where I can sort the data ascending or in descending order in apexchart?

[@lexsoft3969]

I have never known this chart library because it's not listed in the so called top 7 or 10 chart libraries on sites I have ever visited. I just visited the official site of this chart library, and it looked nice, I will try it later. Now I want to know : what is your recommendation about datagrid library, especially one that has good integration with React ? I have just done a survey on 3 libraries : Datatables.net, Handsontable-React and React-Datagrid. Datatables.net is good, but I need a version of editable Datatables.net which is not free. If I only need for non-editable view, I choose Datatables.net. For an editable datagrid, currently I am exploring on Handsontable-React and React-Datagrid. Any suggestion ?

[@K8Tech]

Great bro .. keep up the effort .. Thanks

[@bartm7055]

Is it possible to feed those charts with the data from database? I would love to have them dynamic somehow ;)

[@nusratabbas2193]

Can't we just create a regular JS object? And pass it as the ApexChart Options? Why the 'state'?

[@junedchhipa]

Yes, that's entirely valid. Brad used state just to show the reactivity of the charts - meaning how you can change state and the charts will update.

[@nasrockz1]

Great video as always

[@prathameshsuryavanshi6598]

How do I travel through series part so to change the data part??

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@akshaykulkarni7357]

Can you use api and do it , using multiple apexcharts charts

[@railsonramessousa4990]

Thanks, helped a lot!

[@anujitdash9178]

Hi Brad, I follow all your videos and they are awesome. I was going through this video and exploring charts other than bar. I am not able to see the labels when I am using Pie, Donut and radialBar chart. This issue comes when I am using react, works fine when I am using normal JavaScript. Can you please help me in this.

[@junedchhipa]

Hi Anujit, the example code was wrong for donut/radialBar. I have updated the Github repository. Please check the latest example code for donut/radial-bar to know how to apply labels to those charts

[@anujitdash9178]

@@junedchhipa thanks. It works now.

[@dimitrisefstathiadis6562]

How about some D3.js?? The docs aren't very good and not much Content either. Would be great. Keep up the good work...

[@Akashgame401]

You are genius sir love you sir 😊😊😊🙏

[@josealfonso2117]

Thanks for the video. I have a question: Has anyone created a forest plot chart with ApexCharts? If so, can you please share a codepen? Thanks

[@mquanit]

Awesome brad....

[@Isookov]

Hmm, how about course on this topic? :)

[@jonathansolis8913]

Sir, I love you ❤️, you rock!

[@ShubhamRathod-jg9gt]

Sir please make video on how to make Library

[@ajvaran8008]

17:20 react

[@rajnishpatel580]

thanks a lot sir for this video

[@jivtheshm.r1784]

@brad traversys how to add animation to this apex charts

[@kangqian8288]

Hallo, sir.. When time do tutorial nativescript?? Cause nativescript have hot reload so good now. I think sir shouls try it too.

[@jimothyus]

Does anyone know how he uses emmet in react jsx i cant seem to figure it out

[@maxiequa567]

vscode? some combination of the following in preferences/settings.json, add : ... "emmet.includeLanguages": { "javascript": "html", "jsx":"jsx", "react-jsx":"react-jsx", "react-html":"react-html" }, "emmet.triggerExpansionOnTab":True, "emmet.syntaxProfiles": { "javascript": "jsx" }, ... Process of elimination and remove where redundant

[@SandeepKongathi]

@Brad - Is the Dashboard interactive, if I select a pie in Pie Chart, does the linked Graphs change?

[@monaliza7257]

And the ​chart for react native, please.

[@kesselokinga9554]

Thank you

[@jimfilippou]

Big shout out to the guy behind apex-charts github.com/junedchhipa he did an amazing work, give some starzz

[@natqe4049]

use cloneDeep of lodash

[@maxkinli]

I wanna work in Los Angeles

[@zanzaraloggan3713]

you're the best

[@markokafor7432]

Do you know of any free scheduler libraries out there. Thanks

[@flaasher]

Respect 🙏

[@hado_99bbs56]

Can you do authentication video with React and Auth0? Please

[@YogeshYadav-tk9bh]

Great....

[@Ali-lm7uw]

First

[@marilecanuto8705]

Nicee