Beautiful Area Charts in React with Recharts

แชร์
ฝัง
  • เผยแพร่เมื่อ 31 ธ.ค. 2024

ความคิดเห็น •

  • @leighhalliday
    @leighhalliday  3 ปีที่แล้ว +4

    Check out my new course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com

    • @MaksymMinenko
      @MaksymMinenko 3 ปีที่แล้ว

      For some reason I can't turn the notifications on for your channel. It is disabled ('None'). When trying to change it to 'All' or 'Personalized', it doesn't work and TH-cam says something about "This action is turned off for content made for kids".
      And I'm not kidding, that's true, I can give a screenshot. :)

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      @@MaksymMinenko Weird! I honestly don't know why :D

    • @MaksymMinenko
      @MaksymMinenko 3 ปีที่แล้ว

      @@leighhalliday First of all, I would ask somebody else (another YT account) to check it. Maybe it’s a problem from my side... But that would be weird - I’m subscribed to a lot of channels and everywhere there the notifications work fine.
      Second, maybe you accidentally categorized you channel as "made for kids" content (maybe you were thinking “safe for kids”). Try googling "Watching TH-cam made for kids content".

  • @CoryTheSimmons
    @CoryTheSimmons 3 ปีที่แล้ว +15

    I love when a tutorial is incredibly timely for my specific work requirements. Thanks for all the useful videos, Leigh!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Glad it was useful, Cory!! :D

  • @b088mohdzaid5
    @b088mohdzaid5 7 หลายเดือนก่อน +1

    I’m working on a project and this lectures is truly amazing and helpful for me. Thank you.

  • @theconqueror1111
    @theconqueror1111 3 ปีที่แล้ว +3

    I like the theme you are using for the room that you are in!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thank you!!

    • @Lee-qj4hk
      @Lee-qj4hk 3 ปีที่แล้ว

      @@leighhalliday Yeap, me too - where can I download it? :P

  • @ayush1344
    @ayush1344 9 หลายเดือนก่อน

    This tutorial is really very helpful , I shared it with all my friends
    Great Explanation :)

  • @comiccalvin5124
    @comiccalvin5124 3 ปีที่แล้ว +4

    Please more of these types of videos, extremely helpful. Using vanilla D3 and react together is a pain, so libraries like Recharts that build off of D3 really help.

  • @raymondmichael4987
    @raymondmichael4987 2 ปีที่แล้ว

    Thanks, I had to subscribe .
    Consider creating more of this stuffs, you’ve a teaching spirit.😊

  • @borgestheborg
    @borgestheborg 2 ปีที่แล้ว

    Thank you *so much* for this tutorial. I was practically pulling my hair out trying to implement a custom tooltip for two days until I came across your video.

  • @Figurum
    @Figurum 2 ปีที่แล้ว

    Bro, thank you so much! I spend a week trying to figure out how to do good looking chart for tech test work. You just save my ass.

  • @jonoisedev
    @jonoisedev 3 ปีที่แล้ว +1

    Leigh, your tutorials on React are amazing, man! Thank you so much for sharing this.

  • @qazal900
    @qazal900 3 ปีที่แล้ว +1

    Loved this! Thank you so much for explaining everything and giving me all the tools thwt I needed in a really short amount of time; Please make more videos about this topic

  • @aashankhan2827
    @aashankhan2827 3 ปีที่แล้ว +1

    Loved it 💗 the exactly same thing for which I was looking for a long time Thanks alot 😁

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Glad you enjoyed it! Thanks Aashan!

  • @ThiNguyen-bm5ln
    @ThiNguyen-bm5ln 2 ปีที่แล้ว

    Great contents! I needed this for my job. Thank you!

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว

      Thank you Thi! Glad they helped :)

  • @alfieqashwa
    @alfieqashwa 3 ปีที่แล้ว +1

    always great explanation. thank you for sharing

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thanks Alfie! Glad you enjoyed it!

  • @gaborvaszi3234
    @gaborvaszi3234 3 ปีที่แล้ว +1

    Awesome tutorial thank you for being a gem.

  • @khandoor7228
    @khandoor7228 3 ปีที่แล้ว +2

    Leigh I would be super interested in additional Rechart videos! It would be great to have a high powered chart library at my disposal.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      You got it! I plan to do another one next week :)

  • @arunkumarsahoo1344
    @arunkumarsahoo1344 2 ปีที่แล้ว

    This video is gem...exactly what i needed

  • @Segun_OS
    @Segun_OS 3 ปีที่แล้ว +1

    Thanks for this! Came when I needed it

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Haha nice... I'd like to say I planned it that way but it was chance :D

  • @nicholasbernard2315
    @nicholasbernard2315 3 ปีที่แล้ว

    This was a huge help, thanks so much for your hard word. You have a way of teaching that's very easy to follow along with and stay engaged. Massive props my dude!
    And I would be VERY interested if you followed up on this with more examples.

  • @eugeniosp3
    @eugeniosp3 2 ปีที่แล้ว

    Amazing video dude nice job

  • @AaronMcCloud_Me
    @AaronMcCloud_Me 3 ปีที่แล้ว

    This was exactly what I needed! Thanks!

  • @rahulpagar1853
    @rahulpagar1853 2 ปีที่แล้ว

    Awesome and interesting video....great job

  • @blackswann9555
    @blackswann9555 3 ปีที่แล้ว

    more chart videos would be great! Excellent work and thank you!

  • @beloaded3736
    @beloaded3736 3 ปีที่แล้ว

    Thank you Mr Halliday sir!

  • @CyberGenius777
    @CyberGenius777 3 ปีที่แล้ว

    Great Job!!! I got a task i need to finish using recharts. You helped me a lot. Hello from Russia! There's no any stuff about recharts in RU segment

  • @tyreldelaney
    @tyreldelaney 2 ปีที่แล้ว

    This is a fantastic example. Thanks!

  • @manosmenexis3160
    @manosmenexis3160 3 ปีที่แล้ว +1

    Perfect tutorial once again! Thanks.

  • @kashmirtechtv2948
    @kashmirtechtv2948 11 หลายเดือนก่อน

    Awesome... Yeah that's what we need CUSTOMIZATIONS... and match it as close as possible to some given FIGMA / inspiration design. Thanks

  • @itskaybe8953
    @itskaybe8953 3 ปีที่แล้ว

    just what i was looking for thank you so much

  • @fel_jx
    @fel_jx ปีที่แล้ว

    Great video, thanks!!

  • @marcelagomez9229
    @marcelagomez9229 3 ปีที่แล้ว +1

    Great video, super helpful. Will you be adding anymore to this charting series? Great job explaining all the parts.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Hey Marcela! Thank you! I hope to do a video showing pie charts, or polar charts... I've never used a polar chart but they look so cool :D

  • @mvanojr
    @mvanojr 3 ปีที่แล้ว

    Your always my favourite, thanks!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Haha, thanks Rashidi! I appreciate the support :)

  • @igormikailov4200
    @igormikailov4200 3 ปีที่แล้ว

    Hi, thanks for your videos. They’re very useful.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thanks Igor! I'm glad you enjoy them! More videos on the way :)

  • @andrewkorin
    @andrewkorin 3 ปีที่แล้ว

    gj, thank you Leigh

  • @anuj7286
    @anuj7286 3 ปีที่แล้ว

    Love the tutorial, Thanks sir!

  • @EmekaPeacewill
    @EmekaPeacewill 3 ปีที่แล้ว

    Thank you so much, this was really helpful!

  • @rangabharath4253
    @rangabharath4253 3 ปีที่แล้ว

    Awesome as always 👍😀

  • @webbwu1017
    @webbwu1017 3 ปีที่แล้ว

    Thank you so much !! Can you make a video for Stock RSI chart ??

  • @ibadshaikh2215
    @ibadshaikh2215 3 ปีที่แล้ว +1

    Awesome video Leigh!!
    Btw which theme you are using in your editor.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Thanks Ibad! It's One Monokai

  • @이찬진-o1g
    @이찬진-o1g 3 ปีที่แล้ว

    very nice simple web chart explain!!

  • @ushindi_I_am
    @ushindi_I_am 3 ปีที่แล้ว

    More charts sounds great

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Some Donut Charts are coming your way Ushindi!

  • @michaellite2227
    @michaellite2227 2 ปีที่แล้ว

    Awesome video, I’m just about to work on a chart in my project and I’ll be using ReChart so this gave me a good overlook of the abilities it provides.
    Small q: what Git extension are you using in vsCode? It looks better than my GitLens :)

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว

      Awesome! Glad the video helped, Michael!

  • @user-tt6nc6mo7k
    @user-tt6nc6mo7k 3 ปีที่แล้ว

    If I was working with a large data set, is it possible to only display the tick on the x axis when it is unique. In my particular case its a set of dates, and I only want the tick to show the date when it is a new day.

  • @DEV_XO
    @DEV_XO 3 ปีที่แล้ว

    Amazing!

  • @pikineestest7362
    @pikineestest7362 2 ปีที่แล้ว

    Thanks for sharing.
    But when i try to run react app it rise white screen.
    Please help me.

  • @ianbase646
    @ianbase646 3 ปีที่แล้ว

    thank you so much your tutorial short and straight to do point Can you do live charts with react?

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Hey Ian! Hmm... problem with "live" data is that I need a live data source, which is hard to do in a demo... you need a live data source with a web socket. If you have an open API that does that, please share it with me!

    • @ianbase646
      @ianbase646 3 ปีที่แล้ว

      @@leighhalliday thank you Leigh i found another tutorial he used cpu data if anyone interested this is on youtube azvcvbeRZ08 thank you

  • @raulemilianomirandagutierr3313
    @raulemilianomirandagutierr3313 3 ปีที่แล้ว

    Thanks!

  • @ryanthomas4697
    @ryanthomas4697 3 ปีที่แล้ว

    is there a way to be able to zoom in/out with these charts?

  • @edwinnarvaez2791
    @edwinnarvaez2791 3 ปีที่แล้ว

    Excelente explicación, realize tu ejemplo al pie de la letra pero tengo una consulta. Porque al pasar el cursos varias veces por el custom tooltip chrome crashea, estaba tratando de encontrar el error y me di cuenta que la propiedad active del custom tooltip siempre es verdadera y nunca cambia a falso. Sabes algo al respecto ?

  • @yoyo26-34
    @yoyo26-34 3 ปีที่แล้ว

    super sympa. congrats

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thanks Jerome! Glad you enjoyed it :)

  • @arjunrajeev4916
    @arjunrajeev4916 2 ปีที่แล้ว

    I Love your tutorial❤️. can u plz explain how i can display continues real time value in graphs like the real time ECG Graph where the y axis remains constant and the x axis shift to the left with time

  • @oluwayomioke5862
    @oluwayomioke5862 2 ปีที่แล้ว

    Please tell me you did more of this charts, especially the do not chart because you just saved a sister. lol

  • @chaitanyabharatdokara
    @chaitanyabharatdokara 3 ปีที่แล้ว

    My Tooltip is not showing anything I followed all instructions and even copied your code it shows blank. Also is it possible to add data of nearly 500 objects?

  • @leanprogrammer
    @leanprogrammer 2 ปีที่แล้ว

    really cool 😎

  • @Oteri-ic3xi
    @Oteri-ic3xi 3 ปีที่แล้ว

    thank you

  • @spope
    @spope 3 ปีที่แล้ว

    I think you can use alpha vantage to get ada price data

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Sweet! Thanks for sharing! Good to know for next time :D

  • @BaneZr994
    @BaneZr994 3 ปีที่แล้ว

    Is it possible to program the Tooltip to Follow the Tooltip Cursor and not the mouse Cursor? I also tried making a custom Cursor but had no luck :(

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Hmm... I think you'll have to dive into their docs for more details, I don't knwo off the top of my head.

  • @nadeemakram3764
    @nadeemakram3764 3 ปีที่แล้ว

    How can we addd image to the centre of pie chart using recharts?

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Not sure! :D You'll have to dig in to the documentation or maybe ask their community?

  • @wotizit
    @wotizit 3 ปีที่แล้ว

    liked at 5:00

  • @Maybehassanawad
    @Maybehassanawad 3 ปีที่แล้ว

    there's a problem, if you used this library with tailwind it overwrite rechart's styles and you get a big white space with nothing in it, is there a solution ?

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Hey Hassan! Sorry, I've never used these two packages together so I'm not aware of a solution... might want to open it up with the recharts folks!

    • @Maybehassanawad
      @Maybehassanawad 3 ปีที่แล้ว

      @@leighhalliday ok thank you, go make a new video ❤️

  • @dominichackett
    @dominichackett 3 ปีที่แล้ว

    Great video. I was wasting my time with Chart.js.

  • @abayomioloyinde
    @abayomioloyinde 3 ปีที่แล้ว

    Life saver

  • @ridl27
    @ridl27 3 ปีที่แล้ว

    ty

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      You're very welcome Alex! Thanks for watching!

  • @darmou
    @darmou 3 ปีที่แล้ว

    You have not used for loop for (let i= 0; i < 10; i++) in a while (while (i < 10) good one Leigh :)

  • @masumkhan8893
    @masumkhan8893 2 ปีที่แล้ว

    isn't recharts too big for simple task ?

  • @FaroukHamisu
    @FaroukHamisu 3 หลายเดือนก่อน

    Seen the source code

  • @developing_pain
    @developing_pain 11 หลายเดือนก่อน

    12:51