@bullsense/react-trade-charts

Reusable React chart components including:

📈 Candlestick Charts
🔁 RSI Panels
📊 MACD Panels

⚠️ License Notice

This package is distributed under a custom restrictive license.

You may only use it for personal, non-commercial, and informational purposes. Any other use—including academic, production, or derivative work—is strictly prohibited. See the LICENSE file included in the package for full terms.

📦 Installation

npm install @bullsense/react-trade-charts

🚀 Usage

Import components and prepare your OHLC data:

import {
  CandlestickChart,
  RSIPanel,
  MACDPanel,
} from '@bullsense/react-trade-charts';

const sampleData = rawData.map(item => ({
  date: String(item.t),
  open: Number(item.o),
  high: Number(item.h),
  low: Number(item.l),
  close: Number(item.c),
  volume: Number(item.v),
}));

const [startIndex, setStartIndex] = useState(
  Math.max(0, sampleData.length - 100)
);
const limit = 100; //default is 100
const visibleData = sampleData.slice(startIndex, startIndex + limit);

Zoomable Candlestick Chart

import { ZoomableCandlestickChart } from '@bullsense/react-trade-charts';

<ZoomableCandlestickChart
  data={sampleData}
  width={1200}
  chartHeight={500}
  rsiHeight={150}
  macdHeight={200}
  minLimit={30}
  maxLimit={300}
  initialLimit={100}
  initialStartIndex={sampleData.length - 100}
  showRSI={true}
  showMACD={true}
  chartProps={{
    config: {
      showLegend: true,
      showGrid: true,
      showVolume: true,
      showCrosshair: true,
      lineGradient: true, // new setting
    },
    styles: {
      backgroundColor: '#181830',
      upColor: '#00F5A0',
      downColor: '#FF427A',
      legendTextColor: '#fff',
      legendBackground: 'rgb(0 0 0 / 33%)',
    },
    indicators: [
      { type: 'SMA', period: 20, color: 'orange' },
      { type: 'SMA', period: 50, color: 'red' },
      { type: 'EMA', period: 12, color: 'purple' },
      { type: 'BollingerBands', period: 20, multiplier: 2, color: 'blue' },
    ],
  }}
  rsiProps={{
    styles: {
      backgroundColor: '#181830',
      lineColor: '#ffffff',
      textColor: '#ccc',
      borderColor: '#333',
      overboughtColor: '#ff4d4f',
      oversoldColor: '#52c41a',
      midlineColor: '#888',
      gridColor: '#444',
      overbought: 70,
      oversold: 30,
      period: 14,
    },
  }}
  macdProps={{
    styles: {
      backgroundColor: '#181830',
      macdColor: '#00BFFF',
      signalColor: '#FFA500',
      histogramUpColor: '#33cc99',
      histogramDownColor: '#ff4d4f',
      textColor: '#ccc',
      borderColor: '#333',
    },
  }}
/>;

Candlestick Chart

<CandlestickChart
  visibleData={visibleData}
  fullData={sampleData}
  width={1200}
  height={500}
  startIndex={startIndex}
  onScrollChange={setStartIndex}
  limit={limit}
  dataLength={sampleData.length}
  type="candlestick|line"
  config={{
    showLegend: true,
    showGrid: true,
    showVolume: true,
    showCrosshair: true,
  }}
  styles={{
    backgroundColor: '#181830',
    upColor: '#00F5A0',
    downColor: '#FF427A',
    legendTextColor: '#fff',
    legendBackground: 'rgb(0 0 0 / 33%)',
  }}
  indicators={[
    { type: 'SMA', period: 20, color: 'orange' },
    { type: 'SMA', period: 50, color: 'red' },
    { type: 'SMA', period: 200 },
    { type: 'EMA', period: 12, color: 'purple' },
    {
      type: 'BollingerBands',
      period: 20,
      color: 'blue',
      multiplier: 2,
    },
  ]}
/>

lineGradient: When type="line", enables a fading gradient below the line using the same color as the line.

RSI Panel

<RSIPanel
  visibleData={visibleData}
  fullData={sampleData}
  startIndex={startIndex}
  limit={limit} // If you want to a seamless experience, use the same limit for all of them
  width={1200}
  height={150}
  showBorder={false}
  margin={{ top: 10, bottom: 20, left: 50, right: 10 }}
  styles={{
    backgroundColor: '#181830',
    lineColor: '#ffffff',
    textColor: '#ccc',
    borderColor: '#333',
    overboughtColor: '#ff4d4f',
    oversoldColor: '#52c41a',
    midlineColor: '#888',
    gridColor: '#444',
    overbought: 70,
    oversold: 30,
    period: 14,
  }}
/>

MACD Panel

<MACDPanel
  visibleData={visibleData}
  fullData={sampleData}
  startIndex={startIndex}
  width={1200}
  height={200}
  showBorder={false}
  margin={{ top: 10, bottom: 20, left: 50, right: 10 }}
  styles={{
    backgroundColor: '#181830',
    macdColor: '#00BFFF',
    signalColor: '#FFA500',
    histogramUpColor: '#33cc99',
    histogramDownColor: '#ff4d4f',
    textColor: '#ccc',
    borderColor: '#333',
  }}
  limit={limit}
/>

This setup also supports type="line" charts and includes overlays like SMA, EMA, and BollingerBands.

📁 Components

CandlestickChart: Interactive candlestick renderer with support for OHLC data.
RSIPanel: Relative Strength Index indicator with overbought/oversold zones.
MACDPanel: MACD with histogram, signal line, and grid overlay.
SMA, EMA, BollingerBands: Utility overlays usable with CandlestickChart.
ZoomableCandlestickChart: Wrapper component that adds mouse wheel + pinch zoom/pan support to CandlestickChart, RSIPanel, and MACDPanel.

🧩 Component Props

CandlestickChart

<CandlestickChart
  data={ohlcData}
  width={800}
  height={400}
  showVolume={true}
  overlays={[<SMA period={20} />, <BollingerBands period={20} />]}
/>

data: Array of OHLC objects { timestamp, open, high, low, close, volume }
width, height: Size of the chart
showVolume: Toggle volume bars
overlays: Optional overlay components like SMA, EMA, BollingerBands

RSIPanel

<RSIPanel
  visibleData={data.slice(-50)}
  fullData={data}
  width={800}
  height={150}
  startIndex={0}
  limit={50}
/>

visibleData: Subset of OHLC data to display
fullData: Full dataset for calculating indicators
width, height, startIndex, limit: Chart layout control
styles: Optional customization

MACDPanel

<MACDPanel
  visibleData={data.slice(-50)}
  fullData={data}
  width={800}
  height={150}
  startIndex={0}
  limit={50}
/>

visibleData: Subset of OHLC data to display
fullData: Full dataset for MACD computation
styles: Optional style overrides

ZoomableCandlestickChart

<ZoomableCandlestickChart
  data={ohlcData}
  width={1200}
  chartHeight={500}
  rsiHeight={150}
  macdHeight={200}
  minLimit={30}
  maxLimit={300}
  initialLimit={100}
  chartProps={{ ... }}
  rsiProps={{ ... }}
  macdProps={{ ... }}
  showRSI={true}
  showMACD={true}
/>

Adds synchronized zoom/pan support across Candlestick, RSI, and MACD.

showRSI: (default true) Toggle to display or hide the RSI panel.
showMACD: (default true) Toggle to display or hide the MACD panel.

🛠️ Development

To build the library:

npm run build:lib

To develop with a demo app:

npm run dev:demo

🧪 Tests

npm test

🧹 Lint & Format

npm run lint
npm run format