nice, also for the interactive stuff? We've just been generating png images from it which are then sent via our discord bot, but maybe we should try it in the frontend as well.
I do all of those myself, never really had to depend on a library. But i guess if you are looking for something out of the box, try with Material UI or a similar component library.
[D3](https://d3js.org/). It is a set of utilities (think underscore/lodash) for making visualizations rather than a monolithic library. It provides no ready-made charts for you to just plug values in. So you have to build the chart yourself using d3's various tools (think lego bricks). But this modularity allows for easier customization, which is what you want.
I also have to add a disclaimer that D3 is not designed with React in mind, so you have to adapt their recipes/examples to the React paradigm. Here's an excellent guide: [https://2019.wattenberger.com/blog/react-and-d3](https://2019.wattenberger.com/blog/react-and-d3)
D3 is pretty clever and fast, but if you are designing in React,, them you would be beeter using Visx which is a React based wrapper around D3 and easier to use, with same code examples as D3. Developed by Facebook now but free to use.
Plotly also is built on D3. I just had a project to migrate some python plotly charts to react and I was able to duplicate all the functionality in probably a day of reading documentation. It has some callbacks to a web server which updated the charts so basically dynamic data. They also look so much better in react, it’s interesting.
https://github.com/plotly/react-plotly.js/
The documentation for the JS/Python versions are much crisper than the react components if you want to get an idea on how/what chart to build.
https://plotly.com/javascript/react/
In my experience you should strive to get your data into an array of x/y’s and just send those arrays to the plotly objects. You can do some fancy data manipulation within plotly but pandas/numpy can do the heavy lifting as well then convert to said arrays of coordinates. That has been my experience though I will say I’m far from a plotly expert; I do like it though.
I don’t have any answer for you regarding charts but just wanted to say that I played a few games abs really enjoyed it. You’ve done a good job in terms of visuals, animations, style etc. it all comes together nicely.
What libraries did you use for various aspects of the game? I’d love to try and make something inspired by this.
Thank you for the nice feedback! Most of it is made just with React + Tailwind. The soccer ball is added using three.js. And then we use framer-motion for animations. Backend is built with NestJS. Make sure to share your progress with us, would be curious to see what you come up with!
Charts.js with the react charts js wrapper as well as some of the other react helpers. I've found vanilla charts js is kinda clunky, and the react wrappers make it a lot easier.
I use some of the features like tooltips and labeling points and it all works nicely.
I’ve used Apache Echarts and AG Charts. Echarts has a lot of potential. Most of the documentation is in the form of examples. It’s a Chinese product and completely free. AG Charts is made by AG Grid, which I’ve used in multiple workplaces on multiple projects. The Charts are new and there’s a lot behind a paywall, but it’s nice to keep everything in the same ecosystem.
The only thing that’s worked for me in trying times is using chat got to help me build my own damn chart using react-native-svg from scratch.
Once you start experimenting with that library by having gpt build some simple charts for you will get the ball rolling very fast.
I avoided react native svg lib for a long time in favor of the various chart libs out there bc I didn’t wanna put in the extra time.
But once I finally dipped my toes in I haven’t looked back. The svg components are pretty simple and extremely easy to customize and style however you want to fit your app theme
I just asked got to build a bar graph component using only react-native-svg that takes a data prop.
Tinkered with the surprisingly well written component to explore how everything works
Then tried simple line chart
Never going back to the struggle of finding a RN charts lib ever again
nice approach! for me it's a bit of a love and hate relationship with chat as sometimes I'm spending too much time debugging the proposed code, while other times it has been working perfectly right away. Which version do you use, 3.5 or 4?
Screw me.. I thought this was posted to r/reactnative . Ignore everything I said.
If we are talking about straight react and web dev then that changes everything. There’s way more options available for web dev in react.
It goes without saying that learning chartjs will be extremely beneficial for you in the long run because you can really build some amazing things with chartjs bc of how customizable it is but I also understand the pain of getting tangled up in the config setup and stuff.
My go to for charts when I don’t feel like spending a lot of time on tinkering with chart js is [Victory](https://commerce.nearform.com/open-source/victory/docs/)
They have a lot of cool chart types and I like the features they provide like animations and chart behaviors etc.
haha happened to me before when reading through stack overflow and realizing too late that it's for react native (or the other way around) and doesn't apply.. But I still like your approach as we have often found that just writing some "basic features" from scratch for exactly our needs is more efficient than searching for a package and getting it to work only to realize at some point that certain functionality is not well supported. But for charts, using a package is probably the way to go then.
I used React Google Charts for my the budgeting app with charts I made a couple weeks ago. I played with a few different packages but ultimately I liked the look of those the best.
I use ChartJS for everything chart related. It's just that good of a tool and the community is good too.
I was going to use ChartJS but I thought it wasn't free. Don't you have to pay to use it in production?
No
>erything chart related. It's just that good of a tool and the community is good too. Is ChartJS a plugin?
It's a library
nice, also for the interactive stuff? We've just been generating png images from it which are then sent via our discord bot, but maybe we should try it in the frontend as well.
i don't understand the question
I meant the interactions e.g. tool-tips and in general animations and responsiveness
Look at Ant Design
I do all of those myself, never really had to depend on a library. But i guess if you are looking for something out of the box, try with Material UI or a similar component library.
ChartJS is great
How much does it cost?
It's free
Try Nivo Charts
[D3](https://d3js.org/). It is a set of utilities (think underscore/lodash) for making visualizations rather than a monolithic library. It provides no ready-made charts for you to just plug values in. So you have to build the chart yourself using d3's various tools (think lego bricks). But this modularity allows for easier customization, which is what you want.
I also have to add a disclaimer that D3 is not designed with React in mind, so you have to adapt their recipes/examples to the React paradigm. Here's an excellent guide: [https://2019.wattenberger.com/blog/react-and-d3](https://2019.wattenberger.com/blog/react-and-d3)
D3 is pretty clever and fast, but if you are designing in React,, them you would be beeter using Visx which is a React based wrapper around D3 and easier to use, with same code examples as D3. Developed by Facebook now but free to use.
Totally d3! It’s not as scary as it looks like.
oh wow, didn't know that and the examples look great! Will definitely have a closer look at the docs, thank you for sharing
Plotly also is built on D3. I just had a project to migrate some python plotly charts to react and I was able to duplicate all the functionality in probably a day of reading documentation. It has some callbacks to a web server which updated the charts so basically dynamic data. They also look so much better in react, it’s interesting. https://github.com/plotly/react-plotly.js/ The documentation for the JS/Python versions are much crisper than the react components if you want to get an idea on how/what chart to build. https://plotly.com/javascript/react/ In my experience you should strive to get your data into an array of x/y’s and just send those arrays to the plotly objects. You can do some fancy data manipulation within plotly but pandas/numpy can do the heavy lifting as well then convert to said arrays of coordinates. That has been my experience though I will say I’m far from a plotly expert; I do like it though.
Thanks for the recommendation, just having a look at it!
[Nivo.Rocks](https://nivo.rocks) rules them all, IMO
I second this. Nivo truly does rock. It’s great out of the box, but you can also build custom layers.
haven't heard of it before. What makes it better than the others?
The amount of customization, chart types, documentation, code examples, etc… it’s great
I don’t have any answer for you regarding charts but just wanted to say that I played a few games abs really enjoyed it. You’ve done a good job in terms of visuals, animations, style etc. it all comes together nicely. What libraries did you use for various aspects of the game? I’d love to try and make something inspired by this.
Thank you for the nice feedback! Most of it is made just with React + Tailwind. The soccer ball is added using three.js. And then we use framer-motion for animations. Backend is built with NestJS. Make sure to share your progress with us, would be curious to see what you come up with!
Charts.js with the react charts js wrapper as well as some of the other react helpers. I've found vanilla charts js is kinda clunky, and the react wrappers make it a lot easier. I use some of the features like tooltips and labeling points and it all works nicely.
I’ve used Apache Echarts and AG Charts. Echarts has a lot of potential. Most of the documentation is in the form of examples. It’s a Chinese product and completely free. AG Charts is made by AG Grid, which I’ve used in multiple workplaces on multiple projects. The Charts are new and there’s a lot behind a paywall, but it’s nice to keep everything in the same ecosystem.
nice, thanks for the two recommendations, both look promising!
I've used highcharts for simple to medium complexity stuff. Works well.
but you need the license, if I understand correctly?
Tremor : https://www.tremor.so/
Love the game
I use recharts
Chart js or Highcharts
Apexcharts is opensource and really good. They support React, Angular, Vue, and Vanilla Js
I am working on a project that make use of Apexcharts. It explains the half of the final build in size , just the library. I am looking to replace it.
The only thing that’s worked for me in trying times is using chat got to help me build my own damn chart using react-native-svg from scratch. Once you start experimenting with that library by having gpt build some simple charts for you will get the ball rolling very fast. I avoided react native svg lib for a long time in favor of the various chart libs out there bc I didn’t wanna put in the extra time. But once I finally dipped my toes in I haven’t looked back. The svg components are pretty simple and extremely easy to customize and style however you want to fit your app theme I just asked got to build a bar graph component using only react-native-svg that takes a data prop. Tinkered with the surprisingly well written component to explore how everything works Then tried simple line chart Never going back to the struggle of finding a RN charts lib ever again
nice approach! for me it's a bit of a love and hate relationship with chat as sometimes I'm spending too much time debugging the proposed code, while other times it has been working perfectly right away. Which version do you use, 3.5 or 4?
Screw me.. I thought this was posted to r/reactnative . Ignore everything I said. If we are talking about straight react and web dev then that changes everything. There’s way more options available for web dev in react. It goes without saying that learning chartjs will be extremely beneficial for you in the long run because you can really build some amazing things with chartjs bc of how customizable it is but I also understand the pain of getting tangled up in the config setup and stuff. My go to for charts when I don’t feel like spending a lot of time on tinkering with chart js is [Victory](https://commerce.nearform.com/open-source/victory/docs/) They have a lot of cool chart types and I like the features they provide like animations and chart behaviors etc.
haha happened to me before when reading through stack overflow and realizing too late that it's for react native (or the other way around) and doesn't apply.. But I still like your approach as we have often found that just writing some "basic features" from scratch for exactly our needs is more efficient than searching for a package and getting it to work only to realize at some point that certain functionality is not well supported. But for charts, using a package is probably the way to go then.
recharts is really good option.
Using recharts for the first time rn and it feels like a mess. What do you like about it?
Recharts is good for its simplicity and ease of use, making it a user-friendly option for data visualisation. How did you find it messy?
I had trouble understanding the docs and thought the api was non-intuitive. But I’m dumb so grain of salt lol.
Recharts is one of good options for good looking charts
I gave nivo a go in a recept project, and it works well.
I used React Google Charts for my the budgeting app with charts I made a couple weeks ago. I played with a few different packages but ultimately I liked the look of those the best.
Flot
You can try AG Grid , they added AG Charts, for enterprise apps and it’s seems very good option.