Theming and appearance
How the chart canvas reads your site palette instead of a private colour scheme, which parts follow the theme, the colour-vision rules built into the series ramp, and the one case where the chart keeps its old pixels.
Chart Engine has no colour settings of its own. It paints from the same design tokens as the rest of the platform, resolved live from the page's stylesheet at the moment each frame is drawn. Configure your palette once in Appearance & Design → Site Design and the chart follows.
Where the colours come from
Admin → Appearance & Design → Site Design (/admin/design, permission
access.design) owns the palette, corner radius, typeface, elevation and motion
for the whole site. The chart is a consumer of that, not an exception to it.
A canvas takes a colour as a string, so the chart cannot use CSS classes for the plotted area. What it does instead is read the CSS custom property for each token at draw time and convert it. The practical result is that the canvas and the DOM around it are painted from the same values, in light and dark, including an admin-configured palette.
Everything below follows the theme:
| Layer | Tokens it reads |
|---|---|
| Grounds and panels | background, card, surface-2, surface-3 |
| Grid and axes | border, border-strong |
| Text hierarchy | foreground, muted-foreground, subtle-foreground |
| Candles, volume bars, profit and loss | up, down |
| Crosshair | border-strong |
| Order markers | up and down for direction, warning for pending |
| Expiry lines | warning |
| Interaction accents | primary |
| Indicator and drawing series | chart-1 through chart-6 |
Fifteen colour fields used to be declared in chart settings — seven dark, seven light, plus the expiry-line colour. They were defaulted, documented and read by nothing. They advertised a customisation surface that had never existed, and they were removed rather than migrated. Any stored user settings still carrying those keys are ignored, exactly as they always were.
The series palette
Indicator lines, Fibonacci ladders and any other plotted data draw from a six-slot categorical ramp — the same six slots the rest of the product charts with, so an indicator on the canvas and a figure in a dashboard card belong to one visual system.
Three rules govern how a series picks its colour, and they are worth knowing because they explain why some indicators look the way they do:
- Unordered series take fixed slots, in order. A MACD line and its signal line are two unrelated categories, so they take slot 1 and slot 2. Slots 1 and 2 are blue and amber — the classic pair that stays separable for the most common forms of colour blindness.
- Ordered series take a lightness ramp, not a rainbow. GMMA's twelve lines are ordered fast-to-slow, so they use one hue at twelve lightness steps rather than twelve hues. Ordering carried by lightness survives the loss of hue separation intact; ordering carried by hue does not.
- Direction of price or money never uses the series ramp. Up and down, buy
and sell, profit and loss use the dedicated
upanddowntokens. A neutral indicator line must never be mistakeable for a candle direction.
Beyond six series you must re-encode — slot 1 and slot 7 would be the same colour. In practice the chart never needs that many at once.
Colour-vision deficiency
Several indicators used to carry their meaning in a green/red pair that a colour-blind trader cannot separate. Those were rebuilt:
- GMMA is now blue for the trader group and amber for the investor group, each a six-step lightness ramp.
- The Fibonacci level ladder is two sequential lightness ramps with the 0 and 1 anchors on neutral ink, instead of a fourteen-hue rainbow in which two levels shared a colour.
- Squeeze Momentum's squeeze dots, which report a state, no longer share a colour pair with the momentum histogram, which reports a direction.
- Binary barriers sit on the platform's direction colours with the strike line on a neutral slot.
- Signal-strength markers are one hue at four opacity steps rather than four hues.
There is one honest limitation to know about: the up and down tokens
themselves are not fully separable under deuteranopia. Everywhere the chart
distinguishes up from down it therefore adds a second channel — a marker above
versus below the bar, a triangle that points, a fill versus an outline, or a text
label — rather than relying on colour alone.
Light and dark
Both themes are first-class. Grounds, candles, grid, axes, crosshair, order markers and expiry lines all resolve per theme, and so do the overlay panels: alerts, indicators, multi-timeframe, patterns, replay, signals, templates, the heatmap, the drawing toolbar and the chart's own buttons, badges, inputs and empty, loading and error states.
Two consequences worth calling out:
- Label text on coloured fills is derived from what it sits on. Text on badges, barriers, expiry strips and crosshair chips used to be hardcoded white, which could be unreadable on a light fill. It is now paired with its background.
- Panels do not flash the wrong theme on mount. They no longer briefly render dark before correcting themselves.
A saved theme is honoured on every page load — the case that matters. But toggling light and dark while looking at a chart clears the colour cache without repainting the canvas, so the chart keeps its current pixels until the next tick, pan, zoom or resize.
On a streaming chart that is under a second and you will not notice. On a completely idle chart it persists until you touch the chart. It is most visible in the admin design manager's live preview, where you are flipping schemes against a chart that is not receiving ticks.
This was left as it stands deliberately. Forcing an unconditional redraw on any change to the page's styling is a bigger behavioural change, on a trading chart, than the wart it fixes.
Appearance settings the host page controls
A small set of non-colour settings exists, but it is set by the page that mounts the chart rather than by the trader or the administrator:
| Setting | Default |
|---|---|
chartType |
candlestick |
showGrid, showCrosshair, showLegend |
on |
showToolbar, showPriceAxis, showTimeAxis |
on |
showDrawingTools |
on |
candleWickWidth |
1 |
candleSpacing |
2 |
showOrders, showOrderHistory, showExpiryLines |
set per trading mode |
The trading mode overrides the order-related ones — binary shows expiry lines and spot does not — so the same chart component presents correctly on each screen without the operator configuring anything. See Integration.
Layout also varies by mode: binary and the bot terminal get a taller toolbar, wider drawing rail and larger indicator panels, because they own the whole viewport; spot and futures run compact, because they share the screen with an order book and an order form.
Fonts and numbers
Numbers on the chart — prices, amounts, times — are drawn in a monospace stack led by JetBrains Mono, so digits line up column-wise on the axis and in the crosshair chips. Interface text uses the sans stack. Neither is configurable per chart; both follow the typeface choice in Site Design where one applies.
Next
- Panels — the overlays that inherit all of this.
- Troubleshooting — what to check when the chart looks like it is on the wrong palette.