Implement this chart in react native - reactjs

In the following chart:
The white spot moves along the black line.
I can make background bars, but curve live and white spot seems difficult.
I already use react-native-svg-chart for other charts but IDK that I can make this chart with this library.
How shall I implement this chart in react native?

Related

How to draw a complex Gantt chart in react?

I am trying to build a gantt chart, wherein a single row can have multiple horizontal boxes. Something as shown in the below image.
image-1.
I have explored following react packages, but seems no one is enough to draw multiple horizontal boxes in a single row as shown in the images.
Packages:
react-google-charts
frappe-gantt-react
react-gantt
Please do suggest some solution. Any kind of help is appreciated.
There is a superset of Gantt chart, called Timeline chart. That would help one to implement above mentioned chart.

Using chart.js2 for React, how can I add text at a specific place on the chart?

I am using chart.js 2 in React. I have this horizontal line, on top of which on the graph itself I would like to place a label, right above the dotted-line.
I have seen a lot of this on chart.js in pure vanilla JavaScript, but it's a little bit different in a react application it seems. Thank you

React Measurement Image with draw line as ruler

I searched react library for measurement object annotation on images, library react-measurements can't use on the mobile browsers, cause the library triggering mouse cursor. Can anyone help me to measure draw with line-like images on top?

Anychart zooming on non-map chart types

Working on a project using AnyChart and I'm unable to get zooming to work on any non-map type charts (specifically working with scatterplot.) It doesn't seem like they support anything other than a scroll bar as far as zooming goes for charts like scatterplot.
Does anyone have any clever solutions to be able to add zooming to these charts?

Make up of a single web with react

Hello I'm really new with React and webpack and after a few days already manage to set up a functional working environment. Now I'm stuck in design issues since I would like to create a 960 wide grid separated into 12 columns with 15 gutters. Then start by creating a 100% high section where you center an image on an 80% white background versus a red main color. In advance grateful for any help or tip that is offered
Many css frameworks would let you do that. you don't need to change your existing toolkit if all you need is grid positioning or basic styles.
Also, you can find a number of react libraries for reusable react components like React Toolbox
for example If you're already familiar with bootstrap, Take a look at https://react-bootstrap.github.io

Resources