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.