trading-visualization

Name: trading-visualization
Author: agiprolabs

235stars53forks

How to install trading-visualization?

agiprolabs/claude-trading-skills/trading-visualization

$npx -y skills add agiprolabs/claude-trading-skills --skill trading-visualization

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Trading Visualization
2
3	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.
4
5	Three uses of trading charts:
6
7	1. Pattern recognition — Spot structural changes in price, volume, and momentum that quantitative filters miss.
8	2. Strategy evaluation — Equity curves, drawdown plots, and return distributions expose whether a strategy is robust or curve-fit.
9	3. Reporting — Communicate performance to stakeholders, journals, or your future self with publication-quality visuals.
10
11	---
12
13	## Chart Types Covered
14
15	\| Chart Type \| Purpose \| Library \|
16	\|------------\|---------\|---------\|
17	\| Candlestick \| OHLCV price action with overlays \| mplfinance \|
18	\| Equity curve \| Portfolio value over time \| matplotlib \|
19	\| Drawdown \| Underwater equity plot \| matplotlib \|
20	\| Return distribution \| Histogram + normal fit \| matplotlib \|
21	\| Correlation heatmap \| Cross-asset correlation matrix \| matplotlib / seaborn \|
22	\| Trade markers \| Entry/exit points on price chart \| mplfinance / matplotlib \|
23	\| Indicator panels \| RSI, MACD below price chart \| mplfinance \|
24	\| Position timeline \| When positions were held \| matplotlib \|
25
26	---
27
28	## Libraries
29
30	### mplfinance
31
32	Best for candlestick charts. Built on matplotlib with finance-specific defaults.
33
34	```bash
35	uv pip install mplfinance
36	```
37
38	```python
39	import mplfinance as mpf
40
41	# Basic candlestick from a DataFrame with DatetimeIndex
42	# Columns: Open, High, Low, Close, Volume
43	mpf.plot(df, type="candle", volume=True, style="charles")
44	```
45
46	Key features:
47	- Native OHLCV support — pass a DataFrame directly
48	- Built-in volume bars
49	- `addplot` for overlays (moving averages, Bollinger Bands)
50	- Custom styles via `mpf.make_mpf_style()`
51
52	### matplotlib
53
54	General purpose, most flexible. Use when you need full control over layout.
55
56	```bash
57	uv pip install matplotlib
58	```
59
60	```python
61	import matplotlib.pyplot as plt
62
63	fig, axes = plt.subplots(2, 1, figsize=(14, 8), height_ratios=[3, 1],
64	sharex=True)
65	axes[0].plot(dates, equity, color="#00ff88")
66	axes[1].fill_between(dates, drawdown, 0, color="#ff4444", alpha=0.5)
67	```
68
69	### plotly
70
71	Interactive charts rendered as HTML. Best for exploration and dashboards.
72
73	```bash
74	uv pip install plotly
75	```
76
77	```python
78	import plotly.graph_objects as go
79
80	fig = go.Figure(data=[go.Candlestick(
81	x=df.index, open=df["Open"], high=df["High"],
82	low=df["Low"], close=df["Close"]
83	)])
84	fig.update_layout(template="plotly_dark")
85	fig.write_html("chart.html")
86	```
87
88	---
89
90	## Styling: Dark Theme Default
91
92	Trading terminals use dark backgrounds by default. All charts in this skill follow that convention.
93
94	### Quick dark theme setup
95
96	```python
97	import matplotlib.pyplot as plt
98
99	plt.style.use("dark_background")
100	plt.rcParams.update({
101	"figure.facecolor": "#1a1a2e",
102	"axes.facecolor": "#1a1a2e",
103	"axes.edgecolor": "#333333",
104	"grid.color": "#333333",
105	"grid.alpha": 0.4,
106	"text.color": "#e0e0e0",
107	"xtick.color": "#aaaaaa",
108	"ytick.color": "#aaaaaa",
109	})
110	```
111
112	### Trading color scheme
113
114	\| Element \| Color \| Hex \|
115	\|---------\|-------\|-----\|
116	\| Bullish / profit \| Green \| `#00ff88` \|
117	\| Bearish / loss \| Red \| `#ff4444` \|
118	\| Neutral / info \| Blue \| `#4488ff` \|
119	\| Warning \| Amber \| `#ffaa00` \|
120	\| MA short \| Orange \| `#ff6600` \|
121	\| MA long \| Blue \| `#3399ff` \|
122	\| MA signal \| Yellow \| `#ffcc00` \|
123
124	See `references/styling_guide.md` for complete typography, layout ratios, and export settings.
125
126	---
127
128	## Chart Composition: Multi-Panel Layout
129
130	Most trading charts need multiple synchronized panels — price on top, volume in the middle, indicators at the bottom.
131
132	### Stacked panels with shared x-axis
133
134	```python
135	import matplotlib.pyplot as plt
136	import matplotlib.gridspec as gridspec
137
138	fig = plt.figure(figsize=(14, 10))
139	gs = gridspec.GridSpec(3, 1, height_ratios=[3, 1, 1], hspace=0.05)
140
141	ax_price = fig.add_subplot(gs[0])
142	ax_volume = fig.add_subplot(gs[1], sharex=ax_price)
143	ax_rsi = fig.add_subplot(gs[2], sharex=ax_price)
144
145	# Hide x-tick labels on upper panels
146	ax_price.tick_params(labelbottom=False)
147	ax_volume.tick_params(labelbottom=False)
148	```
149
150	### Panel height ratios
151
152	\| Layout \| Ratios \| Use Case \|
153	\|--------\|--------\|----------\|
154	\| Price + Volume \| `[3, 1]` \| Simple OHLCV chart \|
155	\| Price + Volume + Indicator \| `[3, 1, 1]` \| Standard analysis view \|
156	\| Equity + Drawdown \| `[2, 1]` \| Performance review \|
157	\| Price + RSI + MACD \| `[3, 1, 1]` \| Full indicator stack \|
158
159	---
160
161	## Candlestick Charts with Overlays
162
163	```python
164	import mplfinance as mpf
165	import pandas as pd
166
167	# df: DataFrame with DatetimeIndex, columns Open/High/Low/Close/Volume
168	ema20 = df["Close"].ewm(span=20).mean()
169	ema50 = df["Close"].ewm(span=50).mea

People who liked this also viewed

6 picks

Type

azure-costAzure cost management: query costs, forecast spending, optimize to reduce waste. WHEN: \"Azure costs\", \"Azure bill\", \"cost breakdown\", \"how much am I spending\", \"forecast spending\", \"optimizSkillsJul 2026275k1.3k
pricingWhen the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increaseSkillsJul 202638k41k
stripe-integrationMulti-harness agentic plugin marketplace for Claude Code, Codex CLI, Cursor, OpenCode, GitHub Copilot, and Gemini CLISkillsJul 202611k38k
startup-financial-modelingMulti-harness agentic plugin marketplace for Claude Code, Codex CLI, Cursor, OpenCode, GitHub Copilot, and Gemini CLISkillsJul 20269.5k38k
tushare-finance专为 Claude Code 设计的 Tushare Pro 金融数据技能包，支持 220+ 个接口，用自然语言获取 A 股行情、财务数据、宏观经济等金融数据。SkillsJul 20265.0k75
azure-pricingFetches real-time Azure retail pricing using the Azure Retail Prices API (prices.azure.com) and estimates Copilot Studio agent credit consumption. Use when the user asks about the cost of any Azure seSkillsJul 20264.5k37k

trading-visualization

235stars53forks

View on GitHub

How to install trading-visualization?

agiprolabs/claude-trading-skills/trading-visualization

$npx -y skills add agiprolabs/claude-trading-skills --skill trading-visualization

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Trading Visualization
2
3	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.
4
5	Three uses of trading charts:
6
7	1. Pattern recognition — Spot structural changes in price, volume, and momentum that quantitative filters miss.
8	2. Strategy evaluation — Equity curves, drawdown plots, and return distributions expose whether a strategy is robust or curve-fit.
9	3. Reporting — Communicate performance to stakeholders, journals, or your future self with publication-quality visuals.
10
11	---
12
13	## Chart Types Covered
14
15	\| Chart Type \| Purpose \| Library \|
16	\|------------\|---------\|---------\|
17	\| Candlestick \| OHLCV price action with overlays \| mplfinance \|
18	\| Equity curve \| Portfolio value over time \| matplotlib \|
19	\| Drawdown \| Underwater equity plot \| matplotlib \|
20	\| Return distribution \| Histogram + normal fit \| matplotlib \|
21	\| Correlation heatmap \| Cross-asset correlation matrix \| matplotlib / seaborn \|
22	\| Trade markers \| Entry/exit points on price chart \| mplfinance / matplotlib \|
23	\| Indicator panels \| RSI, MACD below price chart \| mplfinance \|
24	\| Position timeline \| When positions were held \| matplotlib \|
25
26	---
27
28	## Libraries
29
30	### mplfinance
31
32	Best for candlestick charts. Built on matplotlib with finance-specific defaults.
33
34	```bash
35	uv pip install mplfinance
36	```
37
38	```python
39	import mplfinance as mpf
40
41	# Basic candlestick from a DataFrame with DatetimeIndex
42	# Columns: Open, High, Low, Close, Volume
43	mpf.plot(df, type="candle", volume=True, style="charles")
44	```
45
46	Key features:
47	- Native OHLCV support — pass a DataFrame directly
48	- Built-in volume bars
49	- `addplot` for overlays (moving averages, Bollinger Bands)
50	- Custom styles via `mpf.make_mpf_style()`
51
52	### matplotlib
53
54	General purpose, most flexible. Use when you need full control over layout.
55
56	```bash
57	uv pip install matplotlib
58	```
59
60	```python
61	import matplotlib.pyplot as plt
62
63	fig, axes = plt.subplots(2, 1, figsize=(14, 8), height_ratios=[3, 1],
64	sharex=True)
65	axes[0].plot(dates, equity, color="#00ff88")
66	axes[1].fill_between(dates, drawdown, 0, color="#ff4444", alpha=0.5)
67	```
68
69	### plotly
70
71	Interactive charts rendered as HTML. Best for exploration and dashboards.
72
73	```bash
74	uv pip install plotly
75	```
76
77	```python
78	import plotly.graph_objects as go
79
80	fig = go.Figure(data=[go.Candlestick(
81	x=df.index, open=df["Open"], high=df["High"],
82	low=df["Low"], close=df["Close"]
83	)])
84	fig.update_layout(template="plotly_dark")
85	fig.write_html("chart.html")
86	```
87
88	---
89
90	## Styling: Dark Theme Default
91
92	Trading terminals use dark backgrounds by default. All charts in this skill follow that convention.
93
94	### Quick dark theme setup
95
96	```python
97	import matplotlib.pyplot as plt
98
99	plt.style.use("dark_background")
100	plt.rcParams.update({
101	"figure.facecolor": "#1a1a2e",
102	"axes.facecolor": "#1a1a2e",
103	"axes.edgecolor": "#333333",
104	"grid.color": "#333333",
105	"grid.alpha": 0.4,
106	"text.color": "#e0e0e0",
107	"xtick.color": "#aaaaaa",
108	"ytick.color": "#aaaaaa",
109	})
110	```
111
112	### Trading color scheme
113
114	\| Element \| Color \| Hex \|
115	\|---------\|-------\|-----\|
116	\| Bullish / profit \| Green \| `#00ff88` \|
117	\| Bearish / loss \| Red \| `#ff4444` \|
118	\| Neutral / info \| Blue \| `#4488ff` \|
119	\| Warning \| Amber \| `#ffaa00` \|
120	\| MA short \| Orange \| `#ff6600` \|
121	\| MA long \| Blue \| `#3399ff` \|
122	\| MA signal \| Yellow \| `#ffcc00` \|
123
124	See `references/styling_guide.md` for complete typography, layout ratios, and export settings.
125
126	---
127
128	## Chart Composition: Multi-Panel Layout
129
130	Most trading charts need multiple synchronized panels — price on top, volume in the middle, indicators at the bottom.
131
132	### Stacked panels with shared x-axis
133
134	```python
135	import matplotlib.pyplot as plt
136	import matplotlib.gridspec as gridspec
137
138	fig = plt.figure(figsize=(14, 10))
139	gs = gridspec.GridSpec(3, 1, height_ratios=[3, 1, 1], hspace=0.05)
140
141	ax_price = fig.add_subplot(gs[0])
142	ax_volume = fig.add_subplot(gs[1], sharex=ax_price)
143	ax_rsi = fig.add_subplot(gs[2], sharex=ax_price)
144
145	# Hide x-tick labels on upper panels
146	ax_price.tick_params(labelbottom=False)
147	ax_volume.tick_params(labelbottom=False)
148	```
149
150	### Panel height ratios
151
152	\| Layout \| Ratios \| Use Case \|
153	\|--------\|--------\|----------\|
154	\| Price + Volume \| `[3, 1]` \| Simple OHLCV chart \|
155	\| Price + Volume + Indicator \| `[3, 1, 1]` \| Standard analysis view \|
156	\| Equity + Drawdown \| `[2, 1]` \| Performance review \|
157	\| Price + RSI + MACD \| `[3, 1, 1]` \| Full indicator stack \|
158
159	---
160
161	## Candlestick Charts with Overlays
162
163	```python
164	import mplfinance as mpf
165	import pandas as pd
166
167	# df: DataFrame with DatetimeIndex, columns Open/High/Low/Close/Volume
168	ema20 = df["Close"].ewm(span=20).mean()
169	ema50 = df["Close"].ewm(span=50).mea

People who liked this also viewed

6 picks

Type