@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,
    },
  ]}
  tooltipConfig={{
    offsetX: -100,
    offsetY: -100,
    edgeBuffer: 200,
    minWidth: 180,
    maxWidth: 250,
    customStyles: {
      background: 'rgba(0, 0, 0, 0.95)',
      border: '1px solid rgba(255, 255, 255, 0.3)',
      borderRadius: '8px',
      fontSize: '13px',
      padding: '12px',
      boxShadow: '0 6px 16px rgba(0, 0, 0, 0.4)',
    }
  }}
/>

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

Tooltip Configuration

The tooltipConfig prop allows you to customize tooltip positioning and styling:

tooltipConfig={{
  offsetX: -100,        // Horizontal offset from cursor (default: -100)
  offsetY: -100,        // Vertical offset from cursor (default: -100)
  edgeBuffer: 200,      // Minimum distance from chart edges (default: 200)
  minWidth: 180,        // Minimum tooltip width in pixels (default: 180)
  maxWidth: 250,        // Maximum tooltip width in pixels (default: 250)
  customStyles: {       // Custom CSS styles for the tooltip
    background: 'rgba(0, 0, 0, 0.95)',
    border: '1px solid rgba(255, 255, 255, 0.3)',
    borderRadius: '8px',
    fontSize: '13px',
    padding: '12px',
    boxShadow: '0 6px 16px rgba(0, 0, 0, 0.4)',
  }
}}

Tooltip Configuration Options:

• offsetX: Controls horizontal positioning relative to the cursor. Negative values position the tooltip to the left of the cursor.
• offsetY: Controls vertical positioning relative to the cursor. Negative values position the tooltip above the cursor.
• edgeBuffer: Ensures the tooltip stays within chart boundaries by maintaining a minimum distance from edges.
• minWidth: Sets the minimum width of the tooltip in pixels.
• maxWidth: Sets the maximum width of the tooltip in pixels.
• customStyles: Allows complete customization of tooltip appearance using CSS properties.

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} />]}
  tooltipConfig={{
    offsetX: -100,
    offsetY: -100,
    edgeBuffer: 200,
    minWidth: 180,
    maxWidth: 250,
    customStyles: { /* custom CSS */ }
  }}
/>

• 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
• tooltipConfig: Optional tooltip positioning and styling configuration

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

🔒 License

Copyright © Sai Teja Reddy Kommuri 2025 Use of this package is governed by a restrictive license. See the LICENSE file included in the package for full terms.