Package Exports

@nabeeltahirdeveloper/chart-sdk

Readme

@nabeeltahirdeveloper/chart-sdk

TradingView-style chart SDK for React with real-time data, trading controls, and drawing tools.

Installation

npm install @nabeeltahirdeveloper/chart-sdk

Peer Dependencies

npm install react react-dom

Quick Start

import { TradingProvider, Chart, TradingToolbar } from '@nabeeltahirdeveloper/chart-sdk'

function App() {
    return (
        <TradingProvider baseUrl='https://your-api-url.com'>
            <TradingToolbar />
            <Chart />
        </TradingProvider>
    )
}

Components

All components must be rendered inside a <TradingProvider>.

TradingProvider

Wraps your app and provides trading state (symbols, prices, orders, drawing tools, etc).

<TradingProvider baseUrl='https://your-api-url.com'>{children}</TradingProvider>

Prop	Type	Description
`baseUrl`	`string`	Your project's backend API URL. All SDK API calls (trades, candles, symbols, account) go to this URL. If omitted, uses `VITE_BASE_URL` env or `http://localhost:8000`.
`endpoints`	`object`	Optional: Custom endpoint paths. If your backend uses different paths, override them here. Default: `{ candles: '/api/chart/candles', symbols: '/api/symbols', trades: '/api/trades', account: '/api/user/account' }`
`children`	`ReactNode`	Child components

Example with custom endpoints:

<TradingProvider
    baseUrl='https://api-mt5-project.com'
    endpoints={{
        candles: '/api/v1/chart/candles', // MT5 backend path
        symbols: '/api/v1/symbols',
        trades: '/api/v1/trades',
        account: '/api/v1/user/account',
    }}>
    <Chart />
</TradingProvider>

Chart

Full-featured candlestick chart with real-time price updates, order lines, and drawing tools.

<Chart />

TradingToolbar

Unified toolbar that combines all trading controls in a single row. This is the easiest way to add all controls at once.

<TradingToolbar />

Prop	Type	Default	Description
`showCoinSelector`	`boolean`	`true`	Show/hide coin selector
`showVolumeControl`	`boolean`	`true`	Show/hide volume control
`showStopLoss`	`boolean`	`true`	Show/hide stop loss
`showTakeProfit`	`boolean`	`true`	Show/hide take profit
`showDrawingTools`	`boolean`	`true`	Show/hide drawing tools
`showDividers`	`boolean`	`true`	Show dividers between sections
`volume`	`number`	-	Controlled volume value
`onVolumeChange`	`function`	-	Volume change callback
`stopLoss`	`string`	-	Controlled stop loss value
`onStopLossChange`	`function`	-	Stop loss change callback
`stopLossEnabled`	`boolean`	-	Controlled SL toggle state
`onStopLossEnabledChange`	`function`	-	SL toggle callback
`takeProfit`	`string`	-	Controlled take profit value
`onTakeProfitChange`	`function`	-	Take profit change callback
`takeProfitEnabled`	`boolean`	-	Controlled TP toggle state
`onTakeProfitEnabledChange`	`function`	-	TP toggle callback
`coinSelectorProps`	`object`	`{}`	Props passed to CoinSelector
`volumeControlProps`	`object`	`{}`	Props passed to VolumeControl
`stopLossProps`	`object`	`{}`	Props passed to StopLoss
`takeProfitProps`	`object`	`{}`	Props passed to TakeProfit
`drawingToolsProps`	`object`	`{}`	Props passed to DrawingTools
`style`	`object`	-	Custom inline styles
`className`	`string`	-	Custom CSS class

CoinSelector

Searchable dropdown to select trading symbols. Symbols are categorized into Forex/Metals and Crypto. Reads from TradingContext automatically.

import { CoinSelector } from '@nabeeltahirdeveloper/chart-sdk'

;<CoinSelector />

Prop	Type	Description
`style`	`object`	Custom inline styles
`className`	`string`	Custom CSS class

VolumeControl

Numeric input with increment/decrement buttons and preset lot-size chips. Works as controlled or uncontrolled component.

import { VolumeControl } from '@nabeeltahirdeveloper/chart-sdk'

// Uncontrolled (manages its own state)
<VolumeControl />

// Controlled
const [volume, setVolume] = useState(0.1)
<VolumeControl value={volume} onChange={setVolume} />

Prop	Type	Default	Description
`value`	`number`	-	Controlled value
`onChange`	`function`	-	Change callback `(value: number) => void`
`min`	`number`	`0.01`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`0.01`	Step increment
`presets`	`number[]`	`[0.01, 0.05, 0.1, 0.5, 1.0]`	Preset buttons
`showPresets`	`boolean`	`true`	Show preset buttons
`showLabel`	`boolean`	`true`	Show "Vol" label
`label`	`string`	`"Vol"`	Custom label text
`style`	`object`	-	Custom inline styles
`className`	`string`	-	Custom CSS class

StopLoss

Stop loss input with toggle switch and price/pips mode. Red themed.

import { StopLoss } from '@nabeeltahirdeveloper/chart-sdk'

// Uncontrolled
<StopLoss />

// Controlled
const [sl, setSl] = useState('')
const [slEnabled, setSlEnabled] = useState(false)
<StopLoss value={sl} onChange={setSl} enabled={slEnabled} onEnabledChange={setSlEnabled} />

Prop	Type	Default	Description
`value`	`string`	-	Controlled price/pips value
`onChange`	`function`	-	Value change callback
`enabled`	`boolean`	-	Controlled toggle state
`onEnabledChange`	`function`	-	Toggle callback
`mode`	`string`	-	Controlled mode: `"price"` or `"pips"`
`onModeChange`	`function`	-	Mode change callback
`showToggle`	`boolean`	`true`	Show on/off toggle
`showModeSwitch`	`boolean`	`true`	Show Price/Pips toggle
`showLabel`	`boolean`	`true`	Show "SL" label
`label`	`string`	`"SL"`	Custom label text
`style`	`object`	-	Custom inline styles
`className`	`string`	-	Custom CSS class

TakeProfit

Take profit input with toggle switch and price/pips mode. Green themed. Same API as StopLoss.

import { TakeProfit } from '@nabeeltahirdeveloper/chart-sdk'

// Uncontrolled
<TakeProfit />

// Controlled
const [tp, setTp] = useState('')
const [tpEnabled, setTpEnabled] = useState(false)
<TakeProfit value={tp} onChange={setTp} enabled={tpEnabled} onEnabledChange={setTpEnabled} />

Prop	Type	Default	Description
`value`	`string`	-	Controlled price/pips value
`onChange`	`function`	-	Value change callback
`enabled`	`boolean`	-	Controlled toggle state
`onEnabledChange`	`function`	-	Toggle callback
`mode`	`string`	-	Controlled mode: `"price"` or `"pips"`
`onModeChange`	`function`	-	Mode change callback
`showToggle`	`boolean`	`true`	Show on/off toggle
`showModeSwitch`	`boolean`	`true`	Show Price/Pips toggle
`showLabel`	`boolean`	`true`	Show "TP" label
`label`	`string`	`"TP"`	Custom label text
`style`	`object`	-	Custom inline styles
`className`	`string`	-	Custom CSS class

DrawingTools

Toolbar with chart drawing tool buttons. Wired to chart context automatically.

Available tools: Crosshair, Trend Line, Parallel Channel, Fibonacci, Rectangle, Price Level.

import { DrawingTools } from '@nabeeltahirdeveloper/chart-sdk'

;<DrawingTools />

Prop	Type	Default	Description
`showLabel`	`boolean`	`true`	Show "Draw" label
`showDelete`	`boolean`	`true`	Show delete all button
`showVisibility`	`boolean`	`true`	Show visibility toggle
`label`	`string`	`"Draw"`	Custom label text
`style`	`object`	-	Custom inline styles
`className`	`string`	-	Custom CSS class

Using Components Individually

Import and compose components however you like:

import {
    TradingProvider,
    Chart,
    CoinSelector,
    VolumeControl,
    StopLoss,
    TakeProfit,
    DrawingTools,
} from '@nabeeltahirdeveloper/chart-sdk'

function App() {
    const [volume, setVolume] = useState(0.1)

    return (
        <TradingProvider baseUrl='https://your-api-url.com'>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <CoinSelector />
                <VolumeControl value={volume} onChange={setVolume} />
                <StopLoss />
                <TakeProfit />
                <DrawingTools />
            </div>
            <Chart />
        </TradingProvider>
    )
}

Utilities

import { useTrading, setChartBaseUrl, setSocketBaseUrl } from '@nabeeltahirdeveloper/chart-sdk'

useTrading()

React hook that returns the full trading context:

const {
    selectedSymbol,
    setSelectedSymbol,
    selectedTimeframe,
    setSelectedTimeframe,
    symbols,
    symbolsLoading,
    orders,
    userBalance,
    activeTool,
    setActiveTool,
    chartObjects,
    setChartObjects,
    drawingsVisible,
    setDrawingsVisible,
    showGrid,
    setShowGrid,
    chartType,
    setChartType,
    currentSymbolData,
    accountSummary,
} = useTrading()

setChartBaseUrl(url)

Set the base URL for chart API requests.

setSocketBaseUrl(url)

Set the base URL for WebSocket connections.

License

ISC