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)

Heatmap layout

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