Comments (9)
RE:
Is it possible to fix the maximum / minimum ticks values for an axis? ...
when you say
Y axis to be limited to the value 10 :
what do you want to see on the chart when there is an item which has a larger value?
RE:
Is there a clean way to display several Y axis ?...
I am not following why the axisAt
is not good, you could set it at different pixel values, here is an example with multiple yaxis all on the right side. does this help?
RE:
I can have Time based data that are related to each other...
So I understand what you are asking, you want to be able to see the yValue of 3rd May and 25th Dec for 2 different yAccessor
, sort of like shifting the xAxis of one series so you can match up with another series?
from react-stockcharts.
Wow thanks for the fast reply
what do you want to see on the chart when there is an item which has a larger value?
I want the user to guess there are higher value items (the curve increases up to the limit) to eventually decrease back to a visible item.
I am not following why the axisAt is not good, you could set it at different pixel values, here is an example with multiple yaxis all on the right side. does this help?
Yes exactly, I don't know why I must have messed it up, thanks. I tried to put them on the left side, maybe it is related? I need to test that again
So I understand what you are asking, you want to be able to see the yValue of 3rd May and 25th Dec for 2 different yAccessor, sort of like shifting the xAxis of one series so you can match up with another series?
Exactly ! To see the variations between 2 set of datas that occured at different times.
from react-stockcharts.
RE:
Is it possible to fix the maximum / minimum ticks values for an axis? ...
That should be possible by creating a custom indicator, and provide a domain
with the min and max value that you need. A little bit more of coding, needed to override the default behavior which will fit the max and min values of all the yAccessor
s in that Chart
. An example would be the RSI series, where the domain always has to be between 0 and 100.
https://github.com/rrag/react-stockcharts/blob/master/src/lib/indicator/RSIIndicator.js#L71-L73
there is some documentation on how to create custom indicators. If you still have trouble with this, I will be happy to help.
RE:
I can have Time based data that are related to each other...
That is not possible, but I wonder how what you say will be helpful?
I can understand if say you want to compare the number of houses sold by month, over 5 years, and you want each year to be a different series, you will compare
Jan 2010 with Jan 2011 and Jan 2012 ...
Feb 2010 with Feb 2011 ...
what you explain is different, I have not seen any charts which does that. any examples in the wild, so I can better understand how that visualization will be helpful.
Though not what you are asking, have you considered using the CompareSeries
instead? it would give you a % increase over time.
from react-stockcharts.
what you explain is different, I have not seen any charts which does that. any examples in the wild, so I can better understand how that visualization will be helpful.
[EDIT] Apparently multi-X axis will not be so important, and can easily be postponed.
Yep, I havn't seen such examples either, but the users will need that. For example, being able to compare sales in December between any other month that don't include Christmas.
I have tested to put 2 X axis, one on the top and one at the bottom, but after enabling Zoom with:
EventCapture mouseMove={true} zoom={true} pan={true} mainChart={1} defaultFocus={false}
the others X axis seem to be copies of the X axis of the mainChart, when focusing the graph. I have reproduced this problem here .
When focusing the graph, the problem occurs.
I had an other trouble that I could'nt reproduce with this plunker, it's that when I focus the graph, the graph disappears (and there are no console errors, unfortunately). I suspect that's because my array of data can be incomplete (I can have a different number of points for each curves, so the points at the end of the array can be undefined), do you have any idea ? I don't think I messed up with the mainChart Id.
An other question, I don't understand why, when removing the following line from here
dataTransform={[ { transform: StockscaleTransformer } ]}
The ChartCanvas disappears. Why is the transformation needed here?
Thanks.
from react-stockcharts.
the others X axis seem to be copies of the X axis of the mainChart, when focusing the graph. I have reproduced this problem here .
each Chart
has a pair of scales xScale
& yScale
currently all the Charts
will share copies of the same xScale
and these scales are calculated on zoom, pan, and a few other actions. So when you zoom or pan here, the scales are recomputed and both Chart
s get the same xScales
this is expected behavior. However I am looking to create a different type of chart where the xScale
can be computed for each chart, for something like volume profile, but even that wont fit your need of shifting the same data
I had an other trouble that I could'nt reproduce with this plunker, it's that when I focus the graph, the graph disappears
onmousedown => panStart is triggered
onmouseup => panEnd is triggered
onpanend recalculates the scales for the data you are currently seeing on screen, I am not sure what the problem is, without seeing it on a plunker. I am happy to help if you provide a plunker or point me to a public repo with the issue.
An other question, I don't understand why, when removing the following line from here
stockscale is explained here if you remove the stockscale each Chart
needs an xAccessor
, Stockscale provides the xAccessor
implicitly, to all its children, if you see your AreaChart example earlier, that does not have stockscale but has an xAccessor
on each Chart
.
This needs a better error message to be logged on console.
from react-stockcharts.
it's that when I focus the graph, the graph disappears
Well that focus problem resolved itself... But I have an other problem with a real error:
But I don't think it is worth it to dive further for the moment. It is complicated to make my code accessible, as it is embedded inside a Qt application (Qt 5.5) and uses WebSockets. I might do a javascript websocket server though, just so I could share my stuff more easily...
stockscale is explained here if you remove the stockscale each Chart needs an xAccessor,
Well, silly me, thanks.
Is there somewhere you explain how to "build" your git repo? Because I have no idea how to do it, "npm install" just seem to download all source code & dependency, but I wonder how to "build" the sources (under /lib) once I modify them into dist/react-stockchart.js ... Because what i'm doing now is modifying react-stockchart.js, but it feels really bad (especially when I want to do an other Indicator...)
One question I should have asked earlier : how do I use stockcharts to display asynchronous data? I managed to kind of do it, but it feels clumsy to me.
I want 3 curves, one for each type of Y (ep1value, ep2value ep3value).
As you can see, I have "valueX" as my timestamp and "ep1value", "ep2value", "ep3value" my Ys for my 3 yAccessors. to each valueX there are at least one "epXvalue".
The first problem I have with that, it's I have to tell, for each yAccessor, wether or not it has an Y:
For example, here would be the accessor for my curve representing ep1value :
[edited] corrected the yAccessor with my real code. plotId is the drawn curve.
yAccessor = {(d) => d[plotId+"valueY"]}
The second problem, Is that when a point undefined, the "pencil is lifted", the curve is "cut". I just had to modify Line.js drawOnCanvas to avoid interrupting the drawing :
if (yAccessor(d) === undefined) { return ; }
I am not sure it is the proper way to do, is there a way to assign to each yAccessor its own array?
The third problem, is if I want each epXValue to have their own Y axis, I didn't manage to it any other way than giving each yAccessor its own Chart, but it poses multiple problems, such as zoom, X axis not being the same...
from react-stockcharts.
Based the way you have structured the data, can you confirm if this is true?
index | valueX | ep1ValueY | ep2ValueY | ep3ValueY |
---|---|---|---|---|
rawData[0] | Jan 01 1970 00:00:00 | 0 | ||
rawData[1] | Jan 01 1970 00:00:30 | somevalue | ||
rawData[2] | Jan 01 1970 00:01:00 | somevalue | ||
rawData[3] | Jan 01 1970 00:01:30 | 0.008 | ||
rawData[4] | Jan 01 1970 00:02:00 | somevalue | ||
rawData[5] | Jan 01 1970 00:02:30 | somevalue | ||
rawData[6] | Jan 01 1970 00:03:00 | somevalue |
in other words, is your data for say ep3ValueY not continuous? but has gaps?
Is there somewhere you explain how to "build" your git repo?
refer to CONTRIBUTING.md
Also for creating a custom series, you don't need to start from the stockcharts codebase, you could create then as part of your app and then include it.
Closing this issue as these are not issues I see with the library, but general questions, I am happy to continue the discussion here or even better in the gitter chatroom.
from react-stockcharts.
in other words, is your data for say ep3ValueY not continuous? but has gaps?
Yes. this is due to the fact that datas have milliseconds precision, and different gaps between 2 values (one data can have one value every 20 milliseconds, an other data will have a value every 10 seconds, etc. ). Ideally, I would have done one array of arrays, with each array representing all the values (x,y) of one curve, because there is a low probability that I will know the Y of more than one curve for an X.
open http://localhost:8090 in a browser
That's probably what I missed, I suppose the javascript builds itself inside /dist only if i do this step. I'm not used to this kind of thing :)
Also for creating a custom series
Yes, I did just that for the custom indicator for fixing the domain, it works perfectly, thanks !
the gitter chatroom.
Well I'm a github newbie too, couldn't find a link to your chatroom, I would be interested !
from react-stockcharts.
https://gitter.im/rrag/react-stockcharts
from react-stockcharts.
Related Issues (20)
- Error: Cannot find module 'D:\charts\node_modules\@react-financial-charts\annotations\lib\Annotate' imported from D:\charts\node_modules\@react-financial-charts\annotations\lib\index.js HOT 5
- How can I display an indicator using datafeed api.. (for example - Open Interest)
- how to load every time next 3 months data when we reach to the last candle on drag
- How to change displayed format for X axis? HOT 1
- Is it possible to set x Axis to certain date? HOT 2
- What stock charting lib are you using in 2022? HOT 2
- Is it possible to use grouped and stacked bar in one chart HOT 1
- compatibility with next.js -- a lot of warnings and errors HOT 3
- Drawing data-based trendlines on a Candlestick Chart HOT 1
- Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. HOT 5
- Conflict with react^18 HOT 6
- How to add second yAxis? Didn't find anything across docs and internet
- How to show equal interval of ticks with equal spacing in between ticks in x-axis?
- Panning issue in a multi series chart HOT 2
- How to create kdj in chart? HOT 1
- InteractiveYCordinates disappears on mouse enter and mouse click events
- Dependency error during installation HOT 7
- npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected] HOT 1
- Plotting Live Candle in seconds and adding it to data after 1 minute
- Loads more data without losing the current viewport
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-stockcharts.