rebyteai 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, …). Seeexamples/report-price-chart.json. - Fill the spec block in the HTML:
title,subtitle,dataUrl(points at the sibling JSON),panes(each with astretchweight and aserieslist),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;stretchis a relative height weight (main price pane usually3, volume/indicator panes1).series[].type:candlestick,bar,line,area,baseline,histogram, ormarkers.series[].data: the key into the data JSON.series[].title: legend label.color/lineWidth/upColor/downColorare optional overrides (defaults follow the Kami-compatible chart theme).markers: setattachToto thedatakey 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 addcolorper 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.dataUrlto the returnedpublicUrl(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 thedataUrlfetch 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