I want to create some animation rich charts in a dashboard, I have attached some images on how I want,
Where onclick of pie chart section, that section gets separated, and with loader animation, like its loading pie chart.
Some beautiful barchart with loader animation and such.
Before I used react-chartjs-2 library and I was able to build basic dashboard, but I was very static and I was unable add animations as such. If anyone could suggest me some libraries, that is rich in animation or some sample dashboard that includes these features.
Check out Victory Charts (https://formidable.com/open-source/victory/), I've used them in the past for react native projects and loved the API, but it's really a web charts library (the mobile version has performance issues).
Related
I was working on a reactJS dashboard PoC, with data filtering/slicing capability across charts.
Zeroed on dcjs and nivo charts for their capabilities.
I would like to understand whether nivo charts can be used in conjunction with dc.js.
As nivo charts are build on top of d3.js, thought it should be straight forward.
It looks like the registration of nivo charts with dc.js is not possible.
Any leads or reference material on this is really appreciated
Thanks
SD
I need a chart library for react.js to use in PWA Mobile,
therefore library need specifications:
light , small and fast first load
display financial data (candle, bar, line) chart
Integrate and connect any data quick as possible
flexible in changing style
responsive and mobile-friendly
free and open source
ability to update chart in real time (like socket)
I need to implement a chart in react native whose x axis should be in log scale.
Please suggest any chart library to do so.
I am currently using syncfusion chart which is for react js,it seems ok on web view but show error in expo.
I want to make a custom loader that showcases the logo of my company and runs a line across the border of that logo, that or show different images icons during loading, the icons which I want are relevant to my company's business model which I can make, but I want to know how do I go about making a custom loader in react-native or react...
May be this https://medium.com/#kelleyannerose/react-native-activityindicator-for-a-quick-easy-loading-animation-593c06c044dc will help.
Once you know how to play around with the animation, you can add more complex animations, the way you want it. Or probably play with svg and images later with animation.
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.