how charts are drawn here
Every chart on these dashboards is inked SVG drawn by fin-charts.js into a ruled panel.
Lines are ink, fills are halftone dots, every number is mono, gains are leaf and losses are clay.
Copy a snippet below when adding a new chart — never hand-roll colors or a new chart style.
--sun
--leaf · gain
--cobalt · data
--clay · loss
--plum
line · price history
FinCharts.line(el, {
series: [{ label:'nvda', points:[{x:'2026-01-02', y:118.4}, …] }],
fill: 'halftone', markers: [{x, y, ink:'clay', label:'dip'}]
})
candles · ohlc
FinCharts.candles(el, {
data: [{ date:'2026-06-01', open, high, low, close }, …]
}) // up = paper body ruled leaf · down = clay
compare · normalized lines
FinCharts.line(el, {
series: [{label:'nvda', points}, {label:'amd', points}, …],
yFormat: FinCharts.fmt.pct, baseline: 0
}) // series inks cycle cobalt→sun→plum→leaf→clay
bars · daily moves
FinCharts.bars(el, {
data: [{ label:'MU', value:+3.2 }, …], // % change
format: FinCharts.fmt.pct
}) // sign picks the ink: gain leaf, loss clay
donut · allocation
FinCharts.donut(el, {
data: [{ label:'gpu', value: 4200 }, …],
center: 'by market cap'
})
sparkline · in a card
FinCharts.sparkline(el, { points: closes })
// ink auto: ends up = leaf · ends down = clay
rules for the next chart
One chart per panel, a corner caption naming it. No gradients, no shadows, no raster, no third-party chart library.
If a value is a number, it is mono. If a new chart type is needed, add it to fin-charts.js — never inline in a page — and give it a panel on this sheet. Full protocol: DESIGN.md in the repo root.