QuoteHeader />
Price, change and session stats for one instrument — from a quote object or straight from OHLCV bars.
quotebarsshowStatsPro · Terminal components
A trading terminal is more than a chart
The chart is the part everyone ships. The order book, the ticket, the options chain, the funding countdown, the equity curve — that is the part that takes a year. Tickwick Pro ships 52 of them, themed like the chart, fed by plain objects.
Every component further down this page is the real thing, mounted live — not a screenshot.
- One theme, every panel
- Every component reads the same theme object as the chart — 10 bundled palettes or your own tokens. Colors, type and corner radius included. Switch it in the bar below and watch the whole page repaint.
- Any framework, or none
- Native React and Vue components, plus a
.create({ container })factory for Svelte, Angular or plain JS — the same component either way, no wrapper plumbing of your own. - Data in, callbacks out
- No store to adopt and no fetching baked in. You pass plain typed objects and get
onSelect/onSubmitback, so they sit on whatever feed you already have. - Tree-shakeable, embeddable
- One file per component, so you ship only what you import. Pass
wrapper={false}and a component renders bare — no border, no header — inside your own layout.
Terminal.tsx
import { OrderBook, Watchlist } from 'tickwick-pro/components/react';
<Watchlist rows={rows} sortable onSelect={setSymbol} theme="onyx" />
<OrderBook bids={bids} asks={asks} levels={12} theme="onyx" />Every prop is typed — one interface per component, shipped with the package. The docs carry the full reference for each one.
Theme
Market data
The panels a screen opens with: what a name is doing, and what the rest of the market is doing around it.
TickerTape />
A scrolling strip of quotes with sparklines. Pause on hover, click through to a symbol.
itemsspeedonSelectWatchlist />
Sortable quote rows with a sparkline or micro-candles per name, and a selected row.
rowssortableselectedSymbolMarketMovers />
Gainers and losers ranked from the same quote rows, with volume.
rowslimitMarketHeatmap />
Treemap of the market by size, tinted by change and grouped by sector.
itemsheightScreener />
A sortable table over any row shape — you declare the columns and their formatters.
columnsrowsmaxRowsMarketStatus />
Session badge — pre-market, open, after-hours or closed — with the index level beside it.
sessionlabeldetailCorrelationMatrix />
Pearson correlations across a basket. Hand it a grid, or raw price series and let it compute them.
seriesfromPricesshowValuesMarketBreadth />
How broadly the market is moving: advancers against decliners, the distribution of moves, and the share of turnover trading up.
rowsbucketsshowVolumeSectorPerformance />
Sector returns as diverging bars off a zero line, with period tabs — leadership changing hands between timeframes.
rowsperiodssortByYieldCurve />
The curve on a log-maturity axis, against a comparison curve, with the 2s10s spread and an inversion callout.
pointspreviousspreadsRelativeRotation />
RS-ratio against RS-momentum on square axes centred on 100, with the rotation tail behind each head — leading, weakening, lagging, improving.
pointsshowTailsselectedOrder flow & trading
The execution side: the book, the prints, the ticket, and what you are holding.
OrderBook />
Level 2 ladder with cumulative-size bars, spread and configurable price precision.
bidsaskslevelsprecisionDepthChart />
The same book as a filled bid/ask depth curve around the mid.
bidsasksheightTimeAndSales />
The print tape — aggressor side, size and time, newest first.
tradesmaxRowsOrderTicket />
Order entry for cash or leveraged/perp markets: market, limit, stop, stop-limit, with fees and margin worked out live. `onSubmit` hands back a typed order.
symbolpricemaxLeverageonSubmitPositions />
Open positions with mark-to-market P&L per row and a totals footer.
rowsshowTotalssortableLiquidations />
Forced-liquidation feed with long/short dominance across exchanges.
eventsmaxRowsOrderBlotter />
Working and completed orders with fill progress and status — `onCancel` puts a cancel control on anything still live.
ordersfilteronCancelCumulativeDelta />
Aggressor flow: signed per-bucket delta bars under the running CVD line, bucketed from a raw tape or from your own aggregates.
tradesbucketsbucketMsPriceAlerts />
Levels being watched, sorted by how close they are, with an add form. Firing stays with the host — the panel reports intent.
alertspricesonAddDomLadder />
A depth-of-market ladder on a fixed tick grid: volume at price, both sides, your working orders — and `onOrder` makes every cell a click-to-trade target.
levelslastPricetickSizeonOrderLiquidityHeatmap />
Resting book depth plotted against time, with traded price over it — a wall that has stood for ten minutes is a band, one being pulled is a smear.
snapshotspriceRowsrangePercentPositionSizer />
Account, risk tolerance and stop in; quantity, notional, leverage and reward:risk out. `onApply` hands the solved order to a ticket.
accountSizeriskPercentstopPriceonApplyCharts
Standalone chart components — for the places a full widget is more than you need.
CandleChart />
A self-contained candlestick chart: volume sub-pane, moving-average overlays and a crosshair OHLCV readout, from raw OHLCV rows.
dataoverlaysshowVolumecrosshairVolumeProfile />
Volume by price with the point of control marked.
databinsshowPOCMiniCandles />
A micro candle chart — inline in a table row, or anywhere a sparkline is too little.
datawidthheightComparePerformance />
Several instruments rebased to 0% on one axis, ranked by return — relative strength at a glance.
seriesselectedonSelectReturnsDistribution />
The histogram behind the path: mean, sigma, skew, positive share and the 5% tail.
databinsshowMarkersFootprint />
Bid × ask volume at every price inside each bar, on one shared price grid, with delta, point of control and diagonal imbalance shading.
barsimbalanceRatioshowPocInstrument research
Everything about one name that is not its price chart.
KeyStats />
A label/value grid in any number of columns — the generic stat block.
statscolumnsPriceRange />
Where the last price sits inside a range, e.g. the 52-week high/low.
lowhighvaluePerformanceBars />
Trailing returns across periods as a signed bar per window.
periodsAnalystRatings />
The recommendation distribution plus consensus price target against the last price.
ratingspriceTargetcurrentPriceEarningsHistory />
Reported EPS against consensus per quarter, with the beat/miss summary.
periodsshowSummaryTechnicalSummary />
A dozen oscillators and moving averages scored to one buy / neutral / sell meter, computed from your bars.
datarowsshowDetailNewsFeed />
Headlines with source, age and the symbols each one touches.
itemsmaxItemsonSelectEconomicCalendar />
Upcoming releases by impact, with actual against consensus and previous.
eventsonSelectSeasonality />
Monthly returns by year with the cross-year average and hit rate — computed for you from raw OHLCV if you have no table.
returnsbarsmaxYearsDerivatives
Perp and options screens — the parts a crypto or options desk needs that an equity library never ships.
FundingRate />
Perp funding: current and annualised rate, settlement countdown, open interest and the recent history.
ratenextFundingopenInteresthistoryOptionsChain />
Calls/strikes/puts board with IV, open-interest bars, an ATM marker and moneyness shading.
rowsunderlyingPricecolumnshighlightMoneynessOpenInterest />
Open interest over time against price, with the four-way positioning read — new longs, short covering, new shorts, long liquidation.
pointsshowPriceshowRegimeLongShortRatio />
Crowd positioning: the long/short split now, its swing over the window as a diverging area, and the per-venue breakdown.
historyvenueslongPercentPortfolio
Account-level views, for the report rather than the trade.
EquityCurve />
Account value over time with an underwater drawdown strip and an optional rebased benchmark.
pointsbenchmarkshowDrawdownshowStatsAllocation />
Weights as a donut. Category colors hue-rotate the theme accent — the up/down colors are never spent on categories.
slicessizetotalLabelPnlCalendar />
Daily realised P&L as a shaded month grid with week and month totals — the losing Tuesdays an equity curve smooths away.
daysmonthonMonthChangeRiskMetrics />
The tear-sheet block, colored by whether each number is *good* rather than by its sign, with benchmark markers on the bars.
metricsequitybenchmarkLabelStrategy
The backtester, driven by the same engine as the in-chart panel.
Backtest />
Rules in TQL — `rsi(14) < 30 and close > sma(200)` — simulated over your bars, with the full metric set, an equity curve and the trade list. Same `runBacktest` the Pro widget uses.
dataentryexitstopLossPercentshowChartMonteCarlo />
The backtest resampled: a percentile fan of the paths those trades could have taken, with the chance of ending below where you started.
returnsbandsrunspercentilesPrimitives
The small pieces the panels are built from — exported, because your own panels want them too.
Sparkline />
A line or filled area over a plain number array.
dataareacolorDeltaBadge />
A signed value in the up/down color, filled or plain.
valuedigitsfilledGauge />
A dial with colored zones — an RSI, a fear/greed index, a margin ratio.
valuezonesshowBoundsYour first chart is three lines away
Copy the command, paste the snippet, and you have a live stock chart with the whole indicator catalogue behind it. No account, no key, nothing to cancel later.
main.js
import 'tickwick/style.css';
import { TickwickChart, generateRealisticData } from 'tickwick';
TickwickChart.create({ container: '#chart', data: generateRealisticData(500) });Need everything — indicators, tools, widgets, backtesting? Pro is $249/domain/year — and the free core stays MIT either way.