Finance charts

Specialized renderers for finance dashboards, sitting alongside the main candle chart.

Available renderers

Renderer	Use case
SparklineRenderer	Compact tickers, watchlists, KPI cells.
GaugeRenderer	Single scalar gauges — sentiment, risk, exposure.
HeatmapRenderer	Sector / asset correlation matrices.
DepthChartRenderer	L2 order book depth, cumulative bid/ask.
WaterfallRenderer	P&L attribution, additive flows.
EquityCurveRenderer	Backtest equity curve with drawdown shading.
FinanceCrosshair	Multi-axis crosshair for finance charts.

Equity curve example

Pair with the analytics backtester:

import { Backtester } from '@tradecanvas/analytics'
import { EquityCurveRenderer } from '@tradecanvas/chart'

const result = new Backtester({ initialCash: 10_000 }).run(bars, myStrategy)

const renderer = new EquityCurveRenderer(canvas.getContext('2d')!)
renderer.render(result.equityCurve)

Performance dashboard

PerformanceDashboard composes the finance renderers into a single, themed strategy report — a headline stats strip, an equity curve, an underwater drawdown panel, and a calendar monthly-returns heatmap — built directly from a backtest result.

import { Backtester } from '@tradecanvas/analytics'
import { PerformanceDashboard } from '@tradecanvas/chart'

const result = new Backtester({ initialCash: 10_000 }).run(bars, myStrategy)

const dash = new PerformanceDashboard(document.getElementById('report')!, {
  result,            // any { equityCurve, metrics } — Backtester output fits
  theme: 'dark',
  title: 'SMA Crossover',
  subtitle: 'BTC/USDT · 1h · 2023',
})

// later: dash.update(newResult) · dash.setTheme('light') · dash.destroy()

The pure derivations are exported too, if you want a custom layout: computeMonthlyReturns, computeDrawdownCurve, toEquityPoints, and selectKeyStats.

Heatmap layout

HeatmapLayout helps compute square grids and color scales for arbitrary metric matrices.