React Stockcharts

Create highly customizable stock charts with React 18 and D3.

Note: This project has been upgraded to support Node.js v20+ and React v18.

Table of Contents

• Features
• Heads Up (Upgrade Notes)
• Getting Started
  • Prerequisites
  • Installation
  • Running the Demo
  • Building for Production
• Publishing to NPM
• License

Features

• Chart types: Scatter, Area, Line, Candlestick, OHLC, HeikenAshi, Renko, Kagi, Point & Figure.
• Indicators: EMA, SMA, WMA, TMA, Bollinger band, SAR, MACD, RSI, ATR, Stochastic, ForceIndex, ElderRay, Elder Impulse.
• Interactive: Trendline, Fibonacci Retracements, Gann Fan, Channel.
• Performance: Uses Canvas and SVG for high performance rendering.
• Responsive: Pan, zoom, and touch support.

Heads Up (Upgrade Notes)

This repository has been modernized:

• Node.js: v20.19.6 (Required)
• React: v18.2.0 (Using createRoot API)
• Wallpaper: Webpack 5 & Babel 7
• Styles: Dart Sass

Getting Started

Prerequisites

• Node.js v20 or higher.
• npm v10 or higher.

We recommend using nvm to manage your Node versions:

nvm use
# or
nvm install 20
nvm use 20

Installation

Clone the repository and install dependencies:

git clone https://github.com/your-username/react-stockcharts.git
cd react-stockcharts
npm install --legacy-peer-deps pnftrading

Note: --legacy-peer-deps may be required due to some older D3 dependencies.

Running the Demo

To start the development server and view the documentation/examples:

npm start

Open http://localhost:8080 in your browser.

Building for Production

To build the library for distribution (CommonJS and ES Modules):

npm run build

This will generate the build/ folder.

Publishing to NPM

To publish this package to the npm registry, follow these steps:

1. Login to npm:

   npm login

   (You will be prompted for your username, password, and email).

2. Update Version: Update the version field in package.json following semantic versioning (e.g., 0.7.9).

   npm version patch # or minor, major

3. Build the Project: Ensure you have the latest build artifacts.

   npm run build

4. Publish:

   npm publish

   Note: If you are publishing a scoped package (e.g., @yourname/react-stockcharts), add --access public.

License

MIT