| version | 1 |
| name | financial-charts |
| description | Render stock/price charts in financial reports with TradingView Lightweight Charts (candlestick, OHLCV, volume, indicators, backtest markers, equity curves). Use whenever a report chart is fundamentally about a traded instrument's price over time. Keep ECharts for generic business charts. Fill a declarative JSON spec plus a sibling data JSON; deliver as an artifact. |
Financial Charts (TradingView Lightweight Charts)
Phase 3 (Generate the Report) sub-skill. When a report contains price data for
a traded instrument over time, render it with TradingView's open-source
Lightweight Charts — not
ECharts. You do not hand-code charts: you fill a declarative JSON spec and
write a sibling data JSON, using the stable template in
templates/price-chart.html.
Routing rule — TradingView vs ECharts
Decide by what the chart is fundamentally about:
| Use Lightweight Charts (this skill) | Use ECharts / generic charting |
|---|
| Candlestick / K-line for a ticker | Heatmap, correlation matrix |
| Price + volume | Pie / donut breakdown |
| Price with SMA/EMA/Bollinger overlays | Bar / column category comparison |
| Backtest chart with buy/sell markers | Scatter / bubble |
| Strategy equity curve + drawdown | Treemap |
| RSI / MACD / volume secondary panes | Generic KPI dashboards, metric tiles |
| Intraday or daily OHLCV | Any non-price analytical visualization |
| Stock comparison where price/time inspection matters | |
Test: Is the x-axis time and the subject a traded instrument's price /
OHLCV / indicators / trade markers / equity curve? → this skill. Otherwise →
ECharts or the generic charting skill.
Non-goal: do not replace ECharts for generic business charts. This skill is
specifically for TradingView-style market/price charts.
Workflow
- Copy the template. Start from
templates/price-chart.html. It is stable
— do not edit the rendering engine. You edit only the <script id="chart-spec"> block and the data JSON.
- Write the data JSON as a sibling file (e.g.
report-price-chart.json)
holding each series keyed by name (ohlc, volume, sma20, rsi,
trades, …). See examples/report-price-chart.json.
- Fill the spec block in the HTML:
title, subtitle, dataUrl (points
at the sibling JSON), panes (each with a stretch weight and a series
list), notes, asOf.
- Deliver as an artifact (see Delivery below). Never paste the chart
inline in the chat body; never inline the data array into the HTML
<head>.
The library is loaded from the standalone browser build (pinned):
https://unpkg.com/lightweight-charts@5.0.7/dist/lightweight-charts.standalone.production.js
Spec shape (<script id="chart-spec">)
{
"title": "AAPL — Momentum Strategy Backtest",
"subtitle": "Daily bars with SMA(20), trade markers, volume, and RSI.",
"dataUrl": "./report-price-chart.json",
"panes": [
{
"stretch": 3,
"series": [
{ "type": "candlestick", "data": "ohlc", "title": "AAPL" },
{ "type": "line", "data": "sma20", "title": "SMA 20", "color": "#1B365D" },
{ "type": "markers", "data": "trades", "attachTo": "ohlc" }
]
},
{ "stretch": 1, "series": [ { "type": "histogram", "data": "volume", "title": "Volume" } ] },
{ "stretch": 1, "series": [ { "type": "line", "data": "rsi", "title": "RSI 14" } ] }
],
"notes": ["Assumptions and caveats can go here."],
"asOf": "2026-07-05"
}
panes[] render top-to-bottom; stretch is a relative height weight (main
price pane usually 3, volume/indicator panes 1).series[].type: candlestick, bar, line, area, baseline,
histogram, or markers.series[].data: the key into the data JSON.series[].title: legend label. color / lineWidth / upColor /
downColor are optional overrides (defaults follow the Kami-compatible
chart theme).markers: set attachTo to the data key of a price series in the same
pane; markers are drawn on that series.
Data shape (sibling JSON)
{
"ohlc": [ { "time": "2026-07-01", "open": 210.1, "high": 214.2, "low": 208.9, "close": 213.5 } ],
"volume": [ { "time": "2026-07-01", "value": 52000000 } ],
"sma20": [ { "time": "2026-07-01", "value": 205.4 } ],
"rsi": [ { "time": "2026-07-01", "value": 61.3 } ],
"trades": [ { "time": "2026-07-01", "position": "belowBar", "shape": "arrowUp", "color": "#1f7a5c", "text": "Buy" } ]
}
Series-type → row shape:
- Candlestick / bar:
{ time, open, high, low, close }.
- Line / area / baseline / histogram (indicators, volume, close-only,
equity curve):
{ time, value }. Histogram rows may add color per bar.
- Markers:
{ time, position: "aboveBar"|"belowBar"|"inBar", shape: "arrowUp"|"arrowDown"|"circle"|"square", color, text }.
Data rules (must follow)
- Daily bars:
time = "YYYY-MM-DD".
- Intraday bars:
time = Unix seconds (integer).
- Sort every series ascending by time; no duplicate timestamps within a
series.
- Indicator series may start later than the price series (warm-up windows) —
that is fine; align by
time, do not pad with nulls.
- Markers must attach to a price series in the same pane.
- Prefer candlestick for OHLCV. Use line/area only for close-only
series, equity curves, benchmarks, or indicators.
Delivery
Output is an artifact, not an inline card or legacy workbench output. Two
files travel together:
report-price-chart.html
report-price-chart.json
The HTML loads the JSON from spec.dataUrl. Reconciling with the Rebyte
Artifact Store (single-file, portable delivery — see the top-level SKILL.md →
HTML Artifact Output):
- Preferred — hosted data: upload the data JSON as a public artifact,
set
spec.dataUrl to the returned publicUrl (absolute URL, not a relative
path), then upload the HTML and deliver it via <rebyte-artifacts>. Data
stays out of the HTML.
- Self-contained fallback: if the JSON cannot be hosted, paste it into the
template's
<script id="chart-data"> block. The engine uses it only when the
dataUrl fetch fails, so the single HTML file still renders when opened
standalone. Still keep the spec and data as distinct JSON blocks — do not
merge data into the spec.
Do not inline the data array into the page <head>, and do not paste
<html>…</html> into the chat body.
Kami styling
The chart is a two-part artifact: the shared Kami style plus this content
template. templates/price-chart.html carries no inline CSS — it <link>s
../../report-style/styles.css then ../../report-style/report.css, and the
page chrome (.report, .chart-title, .legend, #chart, .notes, .error)
lives in report.css. The rendering engine reads its canvas colors from the
shared --chart-* tokens (--chart-up, --chart-down, --chart-grid,
--chart-surface, …) via getComputedStyle, so nothing is duplicated in JS:
parchment page, ivory chart surface, ink-blue accents, warm-gray grid, warm
editorial green/red candles, and the Kami neutral ramp for overlay lines. To
restyle charts, edit report.css (the --chart-* tokens), not the template.
At delivery, point the two <link href>s at the hosted public-artifact URLs of
the stylesheets (or bundle report-style/ alongside). See
../report-style/README.md.
Files
SKILL.md — this routing + spec reference
templates/price-chart.html — stable, reusable chart template (edit spec block only)
examples/report-price-chart.json — sample data JSON showing every series shape
