Comments (15)
can you share a plunker with the xAxis problem. a few things you can check for assuming you are using 0.2.0
<Chart id={...}>
does not have axAccessor
- you have added
dataTransform={[ { transform: StockscaleTransformer } ]}
to theChartCanvas
a working example is available in http://plnkr.co/edit/gist:1eac0cb78f27b31415ac?p=preview
about the data updating every second, it used to work before in 0.1.6
and I am trying to figure out why it is not working.
from react-stockcharts.
chart not updating when data is updated is a bug. It think was never fully working in 0.1.6
, it worked only when there were no DataTransform
s but since DataTransform
is removed in 0.2.0
this bug has surfaced. I am working to push a fix for this soon.
However I question why you need to update at regular intervals, do you plan to show intra day data which is updated every second? While the fix I am yet to make will make the chart change, the zoom out will have a problem I presume. When you zoom out beyond a certain point, it does not make sense to display so many periods, so the stockscale automatically switches from D
- day to W
- week to M
- month. For intra day data, I have not tested how this would behave.
If all you need is just a chart which updates a rolling period, this fix should make that work.
from react-stockcharts.
I need to update, lets say, every second. It involves changing values inside of a period as well as adding new bars.
Here is plunkr:
http://plnkr.co/edit/QrykKHHP2rkhzSV4yZgz?p=preview
So current problems involve:
- xAxis breaks after zooming;
- zoom breaks after panning right-most, left-most point;
- the chart resets its position if I have some empty space on the left or on the right, so basically I cannot see latest update;
- the chart doesn't follow new updates. I need it shift the graph with every update to see latests changes;
- no canvas retina support (minor problem).
I would also love to see an instruction how to add custom components!
from react-stockcharts.
With every update of the chart mouse position also breaks and I cannot see side indicators, date, OHLC, and hairlines.
from react-stockcharts.
I see what you are trying, you expect the state of the chart except the data to be retained.
Some of these are new feature requests
but the xAxis breaking is because of a mistake in your code you do data.push(data[i]);
that essentially repeats a date again, the axis gets confused when it sees a repeating date or rather a date which is not in increasing order, you will have to ensure that the data is sorted by date and dates don't repeat.
as for the rest
- zoom breaks after panning right-most, left-most point;
I think this is also because of the data having duplicate dates since it does a binary search for the left and right position and as the data is not sorted the left becomes more than right - the chart resets its position if I have some empty space on the left or on the right, so basically I cannot see latest update;
This is a nice feature, it not there today. I should add that - the chart doesn't follow new updates. I need it shift the graph with every update to see latests changes;
This is due to the bug I mentioned above - no canvas retina support (minor problem).
I am not sure what this means, can you please explain - With every update of the chart mouse position also breaks and I cannot see side indicators, date, OHLC, and hairlines.
looks like a bug - I would also love to see an instruction how to add custom components!
I intend to do this documentation soon. Currently working on improving the pan performance for firefox., so there are some changes I have to make which will change the way you write custom components so doing this first.
from react-stockcharts.
Retina support means high-density pixel displays support, like MacBook Pro has for instance or iPhone. Usually it's fixed with setting size of the canvas twice as big but setting style of the actual size. Here is an example.
from react-stockcharts.
I've updated plunkr, but zoom still breaks on update.
from react-stockcharts.
I am not following zoom breaks on update, do you mean when the update happens every second, the chart fits the entire width?
from react-stockcharts.
question about how you feel about having a separate api to push data
<ChartCanvas ref="chart" ...>
...
...
</ChartCanvas>
this.refs.chart.pushData( [ {...}, {...}, {...} ] );
This will help with shifting the chart by the length of the array added, else I am having a tough time finding out that it is only the data
which has changed in the componentWillReceiveProps
and if only data
has changed have to differentiate between a completely different data and one with just a few more elements in the array.
Any ideas or preference you have?
from react-stockcharts.
About zoom. Try constantly pan to the right. After several times of panning I ended up without zoom.
Well, push data may work, but what if I want to change existing bar? And pushing data doesn't seem react way of doing this.
from react-stockcharts.
good feedback.
still not published to npm or released a new version, let me know how this is
http://rrag.github.io/react-stockcharts/documentation.html#/updating_data
There are still some issues when new ticks appear after zoom out, but few of the problems you have mentioned are addressed.
from react-stockcharts.
Decided to use the above option of pushData
. It is very difficult and error prone to determine if an update to data, is a complete update or an update with a few more ticks. created alterData
similar to above for updating existing data points.
Highstock also have a similar function for this purpose
See the example in action.
from react-stockcharts.
published 0.2.1 with some of the fixes. except for retina support, which is a separate issue from updating data. Please open a new issue if you find problems with this build
from react-stockcharts.
Awesome! Thanks for your work! 👍
from react-stockcharts.
added documentation on creating custom Series components and custom indicators
http://rrag.github.io/react-stockcharts/documentation.html#/custom_create_indicator
http://rrag.github.io/react-stockcharts/documentation.html#/custom_create_xxxseries
Appreceate feedback
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 3
- 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.