Beautiful Area Charts in React with Recharts

Поделиться
HTML-код
  • Опубликовано: 26 дек 2024

Комментарии • 110

  • @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 RUclips 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 RUclips 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!

  • @b088mohdzaid5
    @b088mohdzaid5 7 месяцев назад +1

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

  • @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.

  • @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

  • @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.

  • @jonoisedev
    @jonoisedev 3 года назад +1

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

  • @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.

  • @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

  • @ayush1344
    @ayush1344 9 месяцев назад

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

  • @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 :)

  • @raymondmichael4987
    @raymondmichael4987 2 года назад

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

  • @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.

  • @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!

  • @gaborvaszi3234
    @gaborvaszi3234 3 года назад +1

    Awesome tutorial thank you for being a gem.

  • @alfieqashwa
    @alfieqashwa 3 года назад +1

    always great explanation. thank you for sharing

  • @blackswann9555
    @blackswann9555 3 года назад

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

  • @ThiNguyen-bm5ln
    @ThiNguyen-bm5ln 2 года назад

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

  • @kashmirtechtv2948
    @kashmirtechtv2948 10 месяцев назад

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

  • @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

  • @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

  • @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

  • @tyreldelaney
    @tyreldelaney 2 года назад

    This is a fantastic example. Thanks!

  • @manosmenexis3160
    @manosmenexis3160 3 года назад +1

    Perfect tutorial once again! Thanks.

  • @rahulpagar1853
    @rahulpagar1853 2 года назад

    Awesome and interesting video....great job

  • @AaronMcCloud_Me
    @AaronMcCloud_Me 3 года назад

    This was exactly what I needed! Thanks!

  • @itskaybe8953
    @itskaybe8953 3 года назад

    just what i was looking for thank you so much

  • @eugeniosp3
    @eugeniosp3 2 года назад

    Amazing video dude nice job

  • @ibadshaikh2215
    @ibadshaikh2215 3 года назад +1

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

  • @rangabharath4253
    @rangabharath4253 3 года назад

    Awesome as always 👍😀

  • @mvanojr
    @mvanojr 3 года назад

    Your always my favourite, thanks!

    • @leighhalliday
      @leighhalliday  3 года назад +1

      Haha, thanks Rashidi! I appreciate the support :)

  • @webbwu1017
    @webbwu1017 3 года назад

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

  • @EmekaPeacewill
    @EmekaPeacewill 3 года назад

    Thank you so much, this was really helpful!

  • @anuj7286
    @anuj7286 3 года назад

    Love the tutorial, Thanks sir!

  • @fel_jx
    @fel_jx Год назад

    Great video, thanks!!

  • @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 :)

  • @이찬진-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!

  • @andrewkorin
    @andrewkorin 3 года назад

    gj, thank you Leigh

  • @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!

  • @pikineestest7362
    @pikineestest7362 2 года назад

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

  • @DEV_XO
    @DEV_XO 3 года назад

    Amazing!

  • @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

  • @ryanthomas4697
    @ryanthomas4697 3 года назад

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

  • @yoyo26-34
    @yoyo26-34 3 года назад

    super sympa. congrats

    • @leighhalliday
      @leighhalliday  3 года назад

      Thanks Jerome! Glad you enjoyed it :)

  • @leanprogrammer
    @leanprogrammer 2 года назад

    really cool 😎

  • @oluwayomioke5862
    @oluwayomioke5862 2 года назад

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

  • @raulemilianomirandagutierr3313
    @raulemilianomirandagutierr3313 3 года назад

    Thanks!

  • @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.

  • @wotizit
    @wotizit 3 года назад

    liked at 5:00

  • @Oteri-ic3xi
    @Oteri-ic3xi 3 года назад

    thank you

  • @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 ?

  • @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?

  • @dominichackett
    @dominichackett 3 года назад

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

  • @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?

  • @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

  • @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.

  • @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

  • @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 :)

  • @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 ❤️

  • @ridl27
    @ridl27 3 года назад

    ty

    • @leighhalliday
      @leighhalliday  3 года назад

      You're very welcome Alex! Thanks for watching!

  • @abayomioloyinde
    @abayomioloyinde 3 года назад

    Life saver

  • @masumkhan8893
    @masumkhan8893 2 года назад

    isn't recharts too big for simple task ?

  • @developing_pain
    @developing_pain 10 месяцев назад

    12:51

  • @FaroukHamisu
    @FaroukHamisu 3 месяца назад

    Seen the source code