dipping-charts

Financial charting library with technical indicators and drawing tools, built on TradingView Lightweight Charts.

Live Demo

Features

• 9 Technical Indicators — SMA, EMA, RSI, MACD, Bollinger Bands, Stochastic, ATR, VWAP, Williams %R
• 6 Drawing Tools — Trend Line, Horizontal, Vertical, Rectangle, Fibonacci, Text
• 8 Timeframes — 1m, 5m, 15m, 30m, 1H, D, W, M
• React Component — Drop-in <FullFeaturedChart /> with all features
• Vanilla TS/JS — Use the chart engine and indicators without React
• Realtime Updates — Push candle updates via props
• i18n — English (default) and Korean, extensible
• TypeScript — Full type definitions included

Quick Start

React

npm install dipping-charts lightweight-charts

Copy the standalone chart script to your public/ folder:

cp node_modules/dipping-charts/lib/lightweight-charts.standalone.production.js public/

Add it to your index.html:

<script src="/lightweight-charts.standalone.production.js"></script>

Use the component:

import { FullFeaturedChart } from 'dipping-charts/react';
import 'dipping-charts/react/style.css';

function App() {
  return <FullFeaturedChart height={600} data={candles} />;
}

Indicators Only (No React)

import {
  calculateSMA, calculateEMA, calculateRSI,
  calculateMACD, calculateBollingerBands,
  calculateStochastic, calculateATR, calculateVWAP, calculateWilliamsR,
} from 'dipping-charts/indicators';

const sma20 = calculateSMA(candles, { period: 20 });
const rsi14 = calculateRSI(candles, { period: 14 });
const stoch = calculateStochastic(candles, { kPeriod: 14, dPeriod: 3, smooth: 3 });

API

<FullFeaturedChart /> Props

Prop	Type	Default	Description
data	CandleData[]	—	OHLCV candle data
height	number	600	Chart height in pixels
locale	'en' | 'ko'	'en'	UI language
enableTimeframes	boolean	true	Show timeframe buttons
enableIndicators	boolean	true	Show indicator panel
enableDrawingTools	boolean	true	Show drawing tools
defaultTimeframe	TimeFrame	'5m'	Initial timeframe
onTimeframeChange	(tf: TimeFrame) => void	—	Timeframe change callback
realtimeCandle	CandleData	—	Push realtime candle update
loading	boolean	false	Show loading overlay
error	string | null	null	Show error overlay
showVolume	boolean	true	Show volume bars
priceLines	PriceLine[]	—	Horizontal price lines (e.g. avg cost)
initialLineTools	LineTool[]	—	Restore saved drawings
onLineToolsChange	(tools: LineTool[]) => void	—	Drawing change callback
onDrawingToolClick	() => boolean	—	Gate drawing tool access (return false to block)
indicatorStorageKey	string	—	localStorage key for indicator persistence

CandleData

interface CandleData {
  time: number;   // Unix timestamp (seconds)
  open: number;
  high: number;
  low: number;
  close: number;
  volume?: number;
}

Indicators

All indicator functions accept CandleData[] and return IndicatorDataPoint[] (or a multi-line result object).

Moving Averages

calculateSMA(candles, { period: 20 }): IndicatorDataPoint[]
calculateEMA(candles, { period: 20 }): IndicatorDataPoint[]

Momentum / Oscillators

calculateRSI(candles, { period: 14 }): IndicatorDataPoint[]
// Range: 0–100 | Overbought: 70, Oversold: 30

calculateMACD(candles, {
  fastPeriod: 12, slowPeriod: 26, signalPeriod: 9
}): { macd, signal, histogram }  // each IndicatorDataPoint[]

calculateStochastic(candles, {
  kPeriod: 14, dPeriod: 3, smooth: 3
}): { k, d }  // each IndicatorDataPoint[], range 0–100

calculateWilliamsR(candles, { period: 14 }): IndicatorDataPoint[]
// Range: -100–0 | Overbought: -20, Oversold: -80

Volatility

calculateBollingerBands(candles, {
  period: 20, stdDev: 2
}): { upper, middle, lower }  // each IndicatorDataPoint[]

calculateATR(candles, { period: 14 }): IndicatorDataPoint[]
// Average True Range with Wilder's smoothing (RMA)

Volume

calculateVWAP(candles): IndicatorDataPoint[]
// Volume Weighted Average Price — cumulative TP×Vol / Vol

Result Types

interface IndicatorDataPoint {
  time: number;   // Unix timestamp (seconds)
  value: number;
}

Package Exports

Entry Point	Description
dipping-charts	Core types and utilities
dipping-charts/react	React component + hooks
dipping-charts/react/style.css	Component styles
dipping-charts/indicators	Indicator functions (no React dependency)
dipping-charts/chart	Low-level chart engine

Keyboard Shortcuts

Key	Action
Shift + Mouse	Snap to High/Low
Right Click	Context menu (color, width)
Double Click	Edit text annotation
Ctrl/Cmd + Z	Undo last deleted drawing
Escape	Cancel active tool / deselect

Development

git clone https://github.com/QuantrumAI/dipping-charts.git
cd dipping-charts
npm install
npm run demo        # Interactive demo
npm test            # Run tests
npm run type-check  # TypeScript check
npm run build       # Build library

Project Structure

src/
├── react/              # React component & hooks
│   ├── FullFeaturedChart.tsx
│   ├── FullFeaturedChart.css
│   ├── locale.ts       # i18n (en/ko)
│   ├── components/     # IndicatorSettings, etc.
│   └── hooks/          # useChart, useIndicators, useLineTools, useShiftSnap
├── indicators/         # Pure TS indicator implementations
├── components/         # TradingChart (vanilla)
├── types/              # Shared TypeScript types
└── utils/              # Validation utilities

Contributing

See CONTRIBUTING.md for development setup and guidelines.

License

MIT — Copyright (c) 2025 QuantrumAI

This library includes a custom build of TradingView Lightweight Charts (Apache-2.0). See NOTICE for third-party license details.