Build Bar Chart in React using React-Chartjs-2

#reactjs #chartjs #nodejs #javascript
What's up you guys! Hope you're all safe and healthy =)
In this video we will build a bar chart in React using react-chartjs-2 npm package and we will send the data for the chart from our Node js / Express server using an API route and fetch
Hope you will like and enjoy.
Here's a git repo: github.com/mar...
Follow me on Instagram: / marina_webdev

[@marinakim2929]

Why you should not publish a tutorial at 4am: I published the wrong version 😂😭

[@khalidashraf2527]

Marina I love you very excellent explaining

[@lokeshsharma2848]

Owesom diiiiii 🔥🔥🔥🔥, love from India....❣️❣️

[@marinakim2929]

Aaaw love from Kz 👏🙌🙃

[@saranghills]

Thank you for the detailed tutorial. Can you please do a video on how to switch data onClick?

[@zambitogaetano]

❤️❤️ thank you Marina!

[@marinakim2929]

Thank You, Gaetano =)

[@gabrielemarino1360]

13:34 you can also avoid ternary operator passing labels ={data?.[0]?.labels ?? ["pink"]}
this is a combination of optional chaining(?.) and nullish coalescing operator (??).
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand, do it accept as valid falsy values.
The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.
In this way your code will never throw errors!
awesome work as usual Marina!

[@marinakim2929]

Amazing Gabriele) thank you so much 🥰🥰🥰

[@gabrielemarino1360]

@@marinakim2929 ❤️

[@imranafzal1926]

Hi Marina, How can I make it responsive for mobile. On mobile, chart height gets down and I can hardly see the bars!

[@Neuroage24]

Very Good Explaination its help in my product thankyou

[@amanpreet3449]

👍👍❣️

[@alexanderten5497]

Thanks for teaching

[@marinakim2929]

You’re welcome 🥰thank you for supporting

[@alexanderten5497]

@@marinakim2929 your tutorials helped me a lot especially one related to node and react connection:)

[@marinakim2929]

@@alexanderten5497 really? I’m very glad to hear that Alexander 😃🙂

[@ArisAris-fs1ip]

I have a question! How can I understand if a function is asynchronous, is there a rule? Like, get requests and post is asynchronous? How can I understand it?

[@marinakim2929]

Thanks for the question) I think it can be found in the relevant documentation for this function or you can try to log the function.constructor.name check to understand if it’s async or not

[@ArisAris-fs1ip]

@@marinakim2929 thank you!

[@arielfuentes3775]

como lo puedes aplicar para consumir una API y graficarla?

[@MultiPlayerHardcore]

What vscode theme are you using?

[@marinakim2929]

Hi) it’s called community material theme high contrast

[@MultiPlayerHardcore]

@@marinakim2929 I thought it was a Adapta Nokto From Linux Themes for VS Code, its similar, but little different. Thank you! :)

[@khalidashraf2527]

why two years ago up to now no tutorial videos ????

[@ancientgamer4596]

Eren 😍

[@marinakim2929]

Yeeees 🥰😁

[@ancientgamer4596]

❤