Stocking Stuffers — How React can be used to navigate the stock market

Gerardmistretta
4 min readJan 26, 2021

Today I wanted to explore something I hope to use regularly in the near future — React Stockcharts. React Stockcharts is a Node Package Manager that allows a user to create and analyze stock charts in real time. It was created using React JS and Data-Driven Documents.

Just like TradingView or any other app you may be aware of, React Stockcharts lets you chart data, compare technical indicators, and create interactive indicators. To get started, simply:

One fascinating feature is that these charts will display data that updates in real time. However, this poses an interesting question. Since the stock market is not open every day, what happens when it closes? On weekends and holidays, will my charts continue to run?

In short, React Stockcharts uses a noncontinuous manner to depict time. By adjusting your code and using discontinuousTimeScaleProvider, a function which takes some pre-calculated values and the data array to return a scale, time is sculpted to only display data during pre-determined intervals.

Exploring the backend, we can see that many Hooks are used and imported from the React Stockcharts library:

discontinuousTimeScaleProvider and Many Other Library Imports

Without scaling our charts to fix this issue, lapses in data will display on our graphs. This issue could misrepresent otherwise accurate information and lead to costly financial repercussions.

Unadjusted, Continuous Charting

Further exploring candlestick patterns, my favorite type of chart, we can see here what happens to the same exact plot of information when time is accurately scaled:

Time-Adjusted Charting

Quite possibly my favorite feature is that you can draw and adjust trend lines. This is a common approach trade enthusiasts use to locate entry points and exit points for a stock, to graphically display patterns developing, and to make financial decisions. These trend lines are completely interactive, and can be added, removed, highlighted, repositioned, and resized.

Trend Line Example

Again, let’s examine how this is possible:

The interactive functionality created above is an excellent feature that many of the top financial investors use today. While none of this should be considered financial advise, I do recommend exploring React Stockcharts if trading is something that interests you. To take a look at some quick start examples, you can visit https://github.com/rrag/react-stockcharts-examples2. Here, you will find example codes for many different types of charts, as well as numerous links to codesandbox.io for further examination.

Finally, if you aspire to do more than simply read and analyze charts, many coders with a passion for the stock market develop their own trading algorithms that follow finely defined algorithms to buy and sell stocks. Building a trading robot, however, is a difficult task that can result in financial catastrophe if done incorrectly. I implore you to do your own due diligence if this is something you wish to pursue.

The possibilities are endless, you just have to know where to Hook :D

--

--