Skip to content

Trading Bundle (velo-plot/trading)

Focused bundle for trading dashboards. Excludes 3D and heavy scientific plugins while registering candlestick support, trading chart methods, and WebGPU opt-in.

~72 KB gzip (minified ESM). Importing this entry runs registerTrading.ts automatically.

Import the entry

Always import from 'velo-plot/trading', not deep file paths. Registration side-effects run on entry import.

Import

typescript
import {
  createStackedChart,
  createChart,
  PluginDrawingTools,
  PluginReplay,
  PluginKeyboard,
  PluginStreaming,
  createMockDatafeed,
  barsToOhlc,
  mapToBusinessDayScale,
  computeHeikinAshi,
  addIndicatorToChart,
  ChartGroup,
} from 'velo-plot/trading'

Exports

CategorySymbols
ChartscreateChart, createStackedChart
Time scalemapToBusinessDayScale, isBusinessDay, businessDaySpanMs, applyBusinessDayX, formatBusinessDayTick
IndicatorsaddIndicatorToChart, buildIndicatorPaneFromPreset, computeIndicatorFromSeries
Series helperscomputeHeikinAshi
Chart methodschart.addIndicator(), chart.addAlert(), chart.addPositionLine(), chart.setDrawingMode()
PluginsPluginDrawingTools, PluginReplay, PluginKeyboard, PluginStreaming
DatafeedcreateMockDatafeed, barsToOhlc, DatafeedAdapter
SyncChartGroup
OHLCV utilsgenerateBusinessDayOhlcv, generateContinuousOhlcv, …

The full library (velo-plot/full) exports the same trading APIs plus scientific plugins.

What registers on import

registerTradingBundle() (side-effect):

  1. registerExtendedSeries() — candlestick buffers, frame paths, WebGPU, SVG
  2. Trading series preprocessors — heikin-ashi, business-day X, indicator expansion
  3. ChartImpl prototype patch — addIndicator, alerts, position lines, drawing mode
  4. patchExportSVG() — sync vector export

Chart methods

typescript
import { createChart } from 'velo-plot/trading'

const chart = createChart({ container })

// High-level indicators
await chart.addIndicator('rsi', { period: 14 })

// Price alerts
chart.on('alert', (e) => console.log(e))
const id = chart.addAlert({ price: 100, direction: 'above' })
chart.getAlerts()
chart.removeAlert(id)

// Position lines (entry / SL / TP)
chart.addPositionLine({ price: 102, style: 'entry' })

// Drawing mode (requires PluginDrawingTools)
chart.use(PluginDrawingTools())
chart.setDrawingMode('trendline')

On createStackedChart, use stack.addIndicator() and stack.getChart('price') for pane-specific APIs.

Series types (trading)

TypeSupport
candlestick
heikin-ashi✅ (converted to candlestick OHLC)
Business-day x✅ when xAxis.timeScale.calendar: 'business-day'
bar, heatmap, polar✅ via shared extended registration (prefer /scientific if primary)

WebGPU

typescript
import { createChart } from 'velo-plot/trading'

const chart = createChart({
  container,
  renderer: 'webgpu', // falls back to WebGL2 if unavailable
})

Requires trading (or scientific/full) entry — not available on core-only import.

Bundle size

Measured after pnpm build with pnpm check:bundle-size (minified ESM, typical import graph):

EntryGzip (approx.)CI budget
velo-plot (core)~51 KB52 KB
velo-plot/trading~72 KB150 KB
velo-plot/scientific~114 KB200 KB

CI fails if an entry exceeds its budget. Re-run locally:

bash
pnpm build && pnpm check:bundle-size

Report: bundle-size-report.json.

Known limitations

  • Tree-shaken velo-plot/trading excludes 3D and heavy scientific plugins; import velo-plot/scientific or velo-plot/full when needed.
  • Registration runs on entry import — do not deep-import internal modules without the trading entry.
  • Measured minified gzip ~72 KB (CI budget 150 KB) — see bundle-size-report.json.

Released under the MIT License.