Improve getting started docs

[deni-rhn]

• [X] questions

hello everyone, I want to ask how to implement this library? should I buy a license to develop using this library? cause I check on https://reactivemarkets.github.io/react-financial-charts/?path=/docs there is no full code, thanks.

[markmcdowell]

Hi there, this project is a monorepo so all the code is under the packages folder (all under open source MIT license).

You can find all the example code in the stories folder, e.g. https://github.com/reactivemarkets/react-financial-charts/blob/master/packages/stories/src/features/StockChart.tsx

I need to fix storybook to show the code there, hopefully I'll do that today.

GitHub

reactivemarkets/react-financial-charts

Charts dedicated to finance. Contribute to reactivemarkets/react-financial-charts development by creating an account on GitHub.

[deni-rhn]

Hi there, this project is a monorepo so all the code is under the packages folder (all under open source MIT license).

You can find all the example code in the stories folder, e.g. https://github.com/reactivemarkets/react-financial-charts/blob/master/packages/stories/src/features/StockChart.tsx

I need to fix storybook to show the code there, hopefully I'll do that today.

GitHubreactivemarkets/react-financial-chartsCharts dedicated to finance. Contribute to reactivemarkets/react-financial-charts development by creating an account on GitHub.

Thanks @markmcdowell , I hope you can finished it today

GitHub

reactivemarkets/react-financial-charts

Charts dedicated to finance. Contribute to reactivemarkets/react-financial-charts development by creating an account on GitHub.

[sind-git]

It will be great to have the full examples amd storybooks updated to get started. I feel this package has most of what I need to visualise the stock charts with relevant customisation but without any detailed examples on how to implement and customise as functional components in react it's challenging.

[ghost]

I agree with the others :+1:

Awesome project, best of luck :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Industrial]

Hi!

I would also really like to have the example code in the storybook :-)

gr,

Tom

[Swoorup]

Any examples of volume profile?

[markmcdowell]

Any examples of volume profile?

I'll try and add an example today!

[madebyais]

Hi @markmcdowell any simple tutorial for this? I've looked into the storybook, it is way too complex :(

[Cashmeiser]

Stories with examples are really good. But is there any explaination why ema() and ema12 is used everywhere for calcualations Data? For example in "Annotated" example: https://github.com/react-financial/react-financial-charts/blob/b6bac7f5b1a375633eb9fc5a46da45880cd11f5a/packages/stories/src/features/annotated/Annotated.tsx#L50

Why is it needed when ema12 isn't included in the Chart?

[markmcdowell]

Copy and paste issue :)

It’s not needed.

[Cashmeiser]

Copy and paste issue :)

It’s not needed.

Thanks, But what should be used then instead of calculatedData in: https://github.com/react-financial/react-financial-charts/blob/b6bac7f5b1a375633eb9fc5a46da45880cd11f5a/packages/stories/src/features/annotated/Annotated.tsx#L60 ?

I'm quite new at React so I find it difficult understanding the export-function: export default withOHLCData()(withSize({ style: { minHeight: 600 } })(withDeviceRatio()(Annotated))); https://github.com/react-financial/react-financial-charts/blob/b6bac7f5b1a375633eb9fc5a46da45880cd11f5a/packages/stories/src/features/annotated/Annotated.tsx#L103

I've done something like Annoted but as a function (const) and I want to send the OHLCV-data as props since I don't use withOHLCData so how would the export be written?

This is my function:

export const OHLCVStockChart = ({ohlcvDataItems, height, ratio, width}: OHLCVStockChartProps) => {
...

But I cannot build the export-function correctly, this is what I have now (not compiling): export default withSize({ style: { minHeight: 600 } })(withDeviceRatio()(OHLCVStockChart));