In my first ever react app, I'm using ant.design as front-end library. Now I need to create different sort of graphs especially pie charts in my app. So I explored components of ant.design but didn't get any good option in this regard.
Is that possible to create charts/graphs especially pie chart using any of antdesign component? If not then what is the best suited solution in this regard?
If you want to stick with the Ant team there is AntV which is very capable, but does not have React components and (like Ant.Design 6 months ago) only has Chinese documentation. Browsing the docs using Chrome auto-translate works very well, however.
Then there are many JS charting packages with React wrappers:
https://github.com/fraserxu/react-chartist
https://github.com/reactjs/react-chartjs
http://www.fusioncharts.com/react-charts/#/demos/ex1
...etc.
For a more light-weight React-first solution go with
https://github.com/recharts/recharts
https://github.com/fundkis/reactchart
Related
https://echarts.apache.org/examples/en/editor.html?c=circle-packing-with-d3
i am trying to implement this Circular packing example found on Apache Echarts into my react web app.
With the rest of the Echart examples, implementing the Echarts component is easy - but i think this is a custom example. Can you help? Here is the example in js
https://echarts.apache.org/examples/en/editor.html?c=circle-packing-with-d3
Also, what since it is custom - what sort of Api stuff does it follow? Is it like a treemap since it takes the same dataset?
I'm working on a React Native project where I want to implement a layout that has auto placing functionality while fitting all the children as tightly as possible. It just happens that CSS has a wonderful feature that allows grids to autoplace children, sadly React Native doesn't support CSS grid. I've seen a variety of React packages that seem to do this, but there's no implementation for React Native. Examples for React are:
react-grid-layout, Muuri, bin-packing-grid.
I have managed to get the items sorted using a binary packing algorithm, but the visualization is still an issue I can't seem to get working.
My question: is there a package for React Native that can do this or is there an algorithm for the visualization of a binary packed item array that works on React Native?
The grid should be able to auto place children as following. https://i.ibb.co/H72mXRG/Whats-App-Image-2022-07-09-at-2-05-23-AM.jpg
I also thought about using a grid that would work with coordinates (X and Y position), but I couldn't find a working example for React Native. This would also be a viable option.
Any clues in the right direction would be much appreciated.
I have finally found a package that does this. The name is autoresponsive-react-native.
Docs, Github. Little outdated, but works perfectly. No Typescript support though.
This package (autoresponsive-react-native) supports platform independent handling for grids. Since the core functionality is independent from the visualization, it works on multiple platforms
We are migrating big and ugly MVC based Java EE application to React. The application in question is a browser based UI with hundreds of views featuring complex forms, listings and links. It's intended for officer desktop use, so responsiveness is not a concern.
I have built some small admin dashboards with React without using component library, which was hard enough by it's own right. Considering the huge size of this project and amount of developers working on it, I'm considering utilizing a component library for a solid base. I'm seeking for a framework containing the UI components, layout utilities, error handling, validation support etc. Of course the look and feel should be customizable.
Is the Material-UI library a good choice in this case? Do you recommend some additional libraries with it to streamline the development?
Yes, material-ui is a fine choice. It is widely used and very customizable. In my company we are using it for all our frontend projects.
As #Margon already mentioned React is only a library and you probably want to add some additional libraries. The most important are in my opinion react-router for routing and you will want some kind of state management. The most popular are redux and mobx.
I am building a dashboard using JS, that will show users plots of their sales data. Can you suggest a js library, which:
Can plot many points (100k for instance or even more)
Interactive
Supports SSR without losing interactivity (if it’s possible. I just assume that the only way to load this number of data without hurting UX is SSR)
Optional: works with React
Many thanks for any help!
There's probably many options but one could be Victory Chart. The library is built on top of D3.js and is heavily customizable. For your large dataset, I can think of one solution I used that is documented here.
One reason I'd suggest Victory is because they have a nice support community here.
I read many blog posts about that topic, here's one that compares a few "big" chart libraries with React Components.
For time series, I'd suggest having a look at this library.
If nothing works with large datasets, I think that your best option would be D3.js (with or without a React implementation).
I am asking about some JavaScript library or API that I can integrate it in my winjs/HTML Windows store application.
I would like to connect it with my data to render some awesome charts or pies etc.
If someone have any library in mind it will be helpful for me.
Basically you can use any of the diverse Javascript graphing libraries out there. It will depend on what you want to achieve but here's a couple of libraries I found to be of very high quality:
http://g.raphaeljs.com/ (very straightforward)
http://d3js.org/ (more power, more complexity)
http://www.flotcharts.org/ (nice plugin system)
In case charting is an important part of your app, this commercial library may be for you http://www.highcharts.com/
I also found this very extensive list which has even more charting libraries on it but didn't sift through it.
If you are looking for a solution built specifically for Windows 8 HTML and WinJS, then look at the RacControls for Windows 8. They contain a wide array of charts and graphs, as well as SparkLines (coming in beta in the next couple of days) for very lightweight rendering of your data visualizations. If you are looking for Cross Platform, Kendo UI DataViz has many of the same options.
[Full disclosure, I work for Telerik as the Senior Developer Evangelist for DevTools]