Professional trading charts including candlesticks, equity curves, drawdowns, correlation heatmaps, and return distributions

Trading Visualization Visualization is the primary interface between a trader and their data. Charts reveal patterns that tables and numbers cannot: breakdowns in strategy, regime transitions, clustering of losses, and the shape of risk. A well designed chart communicates more in a glance than a page of statistics. Three uses of trading charts: 1. Pattern recognition — Spot structural changes in price, volume, and momentum that quantitative filters miss. 2. Strategy evaluation — Equity curves, drawdown plots, and return distributions expose whether a strategy is robust or curve fit. 3. Reporting — Communicate performance to stakeholders, journals, or your future self with publication quality visuals. Chart Types Covered Chart Type Purpose Library Candlestick OHLCV price action with overlays mplfinance Equity curve Portfolio value over time matplotlib Drawdown Underwater equity plot matplotlib Return distribution Histogram + normal fit matplotlib Correlation heatmap Cross asset correlation matrix matplotlib / seaborn Trade markers Entry/exit points on price chart mplfinance / matplotlib Indicator panels RSI, MACD below price chart mplfinance Position timeline When positions were held matplotlib Libraries mplfinance Best for candlestick charts. Built on matplotlib with finance specific defaults. Key features: Native OHLCV support — pass a DataFrame directly Built in volume bars addplot for overlays (moving averages, Bollinger Bands) Custom styles via mpf.make mpf style() matplotlib General purpose, most flexible. Use when you need full control over layout. plotly Interactive charts rendered as HTML. Best for exploration and dashboards. Styling: Dark Theme Default Trading terminals use dark backgrounds by default. All charts in this skill follow that convention. Quick dark theme setup Trading color scheme Element Color Hex Bullish / profit Green 00ff88 Bearish / loss Red ff4444 Neutral / info Blue 4488ff Warning Amber ffaa00 MA short Orange ff6600 MA long Blue 3399ff MA signal Yellow ffcc00 See references/styling guide.md for complete typography, layout ratios, and export settings. Chart Composition: Multi Panel Layout Most trading charts need multiple synchronized panels — price on top, volume in the middle, indicators at the bottom. Stacked panels with shared x axis Panel height ratios Layout Ratios Use Case Price + Volume [3, 1] Simple OHLCV chart Price + Volume + Indicator [3, 1, 1] Standard analysis view Equity + Drawdown [2, 1] Performance review Price + RSI + MACD [3, 1, 1] Full indicator stack Candlestick Charts with Overlays Equity Curve with Drawdown Panel Return Distribution Correlation Heatmap Trade Markers on Price Chart Output Formats Format Method Use Case PNG fig.savefig("chart.png", dpi=150) Sharing, embedding SVG fig.savefig("chart.svg") Editing, scaling HTML fig.write html("chart.html") (plotly) Interactive exploration Inline plt.show() Jupyter notebooks Saving with dark background Integration with Other Skills Skill Integration pandas ta Compute indicators, pass to addplot overlays vectorbt Extract equity curve and trade list for visualization portfolio analytics Plot Sharpe, drawdown, and return metrics risk management Visualize position limits and exposure over time position sizing Chart position size vs account equity over time regime detection Color background by detected market regime correlation analysis Generate correlation heatmaps from return data Files References references/chart recipes.md — Complete code recipes for six common chart types references/styling guide.md — Dark theme setup, colors, typography, layout, and export settings Scripts scripts/chart generator.py — Generate four chart types from synthetic data (candlestick, equity, returns, trades) scripts/performance report.py — Multi chart performance report with summary statistics

trading-visualization