Has anyone ever used a graph like this with Reactjs? - reactjs

I want to visualize a data using graph, this is the sample graph that i want to use it.
I think the picture above is like time series graph types, data on the graph shows a random numbers in variety of time. If every data number is null or empty the graph is painting a full vertical red line.
My goal is to visualize a data like picture above, i already tried to use a different reactjs chart to visualize a data but can't
make if every data number is null or empty the graph is painting a full vertical red line like the picture.
Has anyone ever used a chart like the picture above?

It is better if you try Recharts. It is a compo-sable charting library for react components.

Related

Does Recharts have anything that looks like this?

Does anyone know any js chart api's that have something like this or anny workarounds within recharts to implement this. Can't find anything useful in the documentation except radial bar charts but the way it is implemented is such that the biggest value it draws is a full ring, so plotting only a single value will always have a full ring instead of a changing percentage like i want?

Drawing a bar chart in the background of candlestick chart in apexchart

I am playing with candlestick graphs (example from here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/) everything work as expected.
However, I am struggling with adding my signal data for a visual representation of the graph.
I am unable to find a solution that works I was thinking I can somehow fine-tune a timeline - I tried chart.js/apexcharts and for now, I believe the closest will be with the second framework.
What I need is a bar chart that can be used in numeric ranges for the X and Y-axis as presented below. (the goal is to be able to add the green bar as presented)
Is there an easy win or an idea of how to approach this?
Is there something I am missing?
That is my current solution (line graphs with stopWin/stopLose and entry price).
Still suboptimal - but works and is easy to achieve.
After weeks of playing around with it - the solution stayed:
I got two instances of apexcharts one with candlestick and one with line graphs
they are in a single div with CSS playground and position absolute.
I am passing standardised min/max values and has to have the same amount of elements in them (line graphs are allowing You to add null values which allow using this solution.
The final version work is repeatable and looks good.
if you need some help in similar case - feel free to reach out ;)

Angular: moving charts into different bindings

New developer here working on some thing that's a little out of my depth.
I'd like to have dynamically generated charts into rotate into different, predetermined locations on my page.
for example:
chart 1
chart 2
chart 3
would rotate thru a list of 5 charts to display
chart 2
chart 3
chart 4
I feel like my best option here is to create objects (JSON maybe?) of these charts and to have them stored in an array, then have the array loop through the binding locations and 'plop' (for lack of better word) the object's details into the next spot in the rotation, which theoretically would allow the chart to render in the new location; with a timer driving the changes.
I would probably use pre-set frames to designate the slots being rotated into, though I'm less positive that is the right way to handle that.
I know this is possible with angular, and despite my best efforts I cannot for the life of me determine the best way to go about this. I'm really very open as to the method this gets done, but am at a complete loss on how to set up the data-binding framework to accomplish this.

Curving chart diagram

My goal is to have a diagram which look like this
Each arrow should be a one dimensional chart, where point are displayed (colors and point size depends on some values)
I'm building my own chart system because I spent a few hours looking for one which allow to custom markers (size and colors, and maybe even shape) but I couldn't find one.
Actually the only one I found is dynamic data display 2.0 which is only proposed in Silverlight.
My biggest problem is the two curving chart I have to do at the top of the diagram.
I tried to use PathListBox control, but because it's a listBox, I couldn't display items at fixed X position (like using a chart).
I'm not asking for a full perfect solution, but can someone give me advices, or clues ?
How would you manage to do something like that ?
It should only be a XAML work here, because all the data are already ready in a ListCollectionView (i'm using MVVM).
Thank you !

Initialize JFreeChart range axis values

I am trying to load dataset during initialization of the JFreeChart. But every time I tried to create a dataset with higher "number of item per series", the more data (all data) displayed visible in the chart (the bigger the dataset, the smaller the graph). But actually what I wanted is to have the fixed range of dataset values displayed on the chart while the rest is still hidden. Just the same way the data would normally be displayed in the actual trading platform, let's say Metatrader (MT4). First time when I open the chart I can see the screen filled with the only visible dataset of the chart and if I left-scroll the chart I will be able to see the old/history dataset as well. Does anyone have idea how to achieve this using JFreechart?
Really appreciate for any help or any thing/articles I can refer. Thanks so much!
You can use setRange() on either the domain or range axis, as shown in this fragment. If you've already tried this, it may help to edit your question to include an sscce and/or image that exhibits any problems you encountered.

Resources