Cette page n’est pas encore traduite ; elle s’affiche en anglais.

Styling the widget

The widget's look is a set of tokens: the corners of each kind of part, control and bar sizes, type, borders, shadows, how a chosen button shows, and whether the toolbar and drawing tools sit along the edges or float. Start from a preset and change what you like. Colours stay with the theme (dark / light, see the API); a look works with either.

Presets

Preset	Look
`studio` (default)	Rounded 7 px controls, 11 px menus and 16 px dialogs. Groups are spaced instead of ruled, menus float on soft shadows, the interval buttons sit in a segmented track, and a chosen button is a tinted fill.
`terminal`	Dense and square: 2 px corners, 26 px controls, rules between groups, capital labels, and a line under the chosen button. Price tags on the chart are square.
`capsule`	Pills everywhere, pill price tags included. The toolbar and the drawing tools float as islands, menus are frosted glass, and a chosen button is a solid pill.

Picking a look

import { ChartWidget, ChartWidgetGrid } from '@tradecanvas/chart/widget'

const widget = new ChartWidget(host, { ui: 'terminal' })
widget.setUI('capsule')        // in place: nothing is rebuilt
widget.getUI()                 // every token, resolved

// A grid: every chart and the grid's bar, and the charts it adds later
const grid = new ChartWidgetGrid(host, { layout: '2x2', widget: { ui: 'terminal' } })
grid.setUI('studio')
grid.getUI()

Your own look

A theme starts from a preset (Studio when you name none) and changes what it names. Corners set on the scale reach every part that follows it, unless you set that part's own.

widget.setUI({
  preset: 'studio',
  radius: { xs: 3, sm: 5, md: 10, lg: 12, xl: 18 },  // the scale, px (999: pills)
  components: { dialog: 20, tag: 0 },                // a part's own corners
  density: 'compact',                                // compact · comfortable · spacious
  sizes: { toolbar: 40 },                            // px; wins over density
  font: {
    family: "'Manrope', system-ui, sans-serif",
    mono: "'JetBrains Mono', monospace",
    size: 13, weight: 500, strongWeight: 600,
    labelCase: 'uppercase', labelTracking: 0.06,      // small labels
  },
  borders: { width: 1, separators: true },           // rules between toolbar groups
  shadows: { menu: '0 12px 30px rgba(0, 0, 0, 0.4)' },
  blur: 12,                                          // frosted floating surfaces, px
  active: 'solid',                                   // tint · solid · underline
  toolbar: 'floating',                               // docked · floating
  sidebar: 'floating',
  intervals: 'segmented',                            // plain · segmented
  tagRadius: 999,                                    // the chart's price tags and pills
})

Field	What it sets
`radius`	The corner scale `xs`, `sm`, `md`, `lg`, `xl`, px (0–999).
`components`	A part's own corners: `control` (buttons), `input`, `menu`, `dialog`, `panel` (alerts, data window, order ticket), `tooltip`, `tag`, `toast`, `toolbar` and `sidebar` (their own box, seen when they float). By default controls and fields take `md`, menus and panels `lg`, dialogs `xl`, tooltips and tags `sm`.
`density` / `sizes`	`toolbar` height, `control` and `controlSmall` heights, `icon`, `sidebar` width and `menuItem` height, px.
`font`	Families (CSS lists), body `size` (11–20 px; the small sizes follow it), weights, and the case and letter spacing (em) of small labels such as section titles.
`borders`	Border width, and whether rules separate the toolbar's groups and the drawing tools.
`shadows`	CSS shadows of menus, dialogs and tooltips.
`blur`	Frosted menus, px: above 0, menus let some of the chart through, blurred.
`active`	How a chosen button shows: a tinted fill, a solid pill, or an underline.
`toolbar` / `sidebar`	Along the edge, or floating as an island.
`intervals`	The interval buttons as they are, or in a segmented track.
`tagRadius`	Corners of the price tags, axis pills and order badges the chart draws.

Values it can't use (out of range, or CSS that could leave its declaration) are ignored and keep the preset's.

Fonts

The widget loads no fonts: it names them, and the browser falls back along each list. Studio names Manrope, then Inter; Terminal IBM Plex Sans Condensed and IBM Plex Mono; Capsule Sora. Load the ones you want:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap">

CSS variables

The tokens are CSS variables on the widget's root (and on its dialogs). Without the ui option they stay the stylesheet's — Studio's — so your own CSS can set them: the widget puts its stylesheet first in the page, so a rule of yours on .tcw-root wins. With ui, the widget writes them on the element, and they win.

.tcw-root {
  --tcw-radius: 4px;            /* the md corner: buttons and fields follow it */
  --tcw-dialog-radius: 12px;
  --tcw-control-h: 28px;
  --tcw-font: 'Inter', system-ui, sans-serif;
}

Variables	From
`--tcw-radius-xs`, `-sm`, `--tcw-radius`, `-lg`, `-xl`	`radius`
`--tcw-control-radius`, `--tcw-input-radius`, `--tcw-menu-radius`, `--tcw-dialog-radius`, `--tcw-panel-radius`, `--tcw-tooltip-radius`, `--tcw-tag-radius`, `--tcw-toast-radius`, `--tcw-toolbar-radius`, `--tcw-sidebar-radius`	`components`
`--tcw-toolbar-h`, `--tcw-control-h`, `--tcw-control-h-sm`, `--tcw-icon`, `--tcw-sidebar-w`, `--tcw-menu-item-h`	`sizes`
`--tcw-font`, `--tcw-font-mono`, `--tcw-font-size` (and `-sm`, `-xs`, `-lg`), `--tcw-weight`, `--tcw-weight-strong`, `--tcw-label-case`, `--tcw-label-tracking`	`font`
`--tcw-border-w`, `--tcw-sep-w`	`borders`
`--tcw-menu-shadow`, `--tcw-dialog-shadow`, `--tcw-tooltip-shadow`	`shadows`
`--tcw-blur`, `--tcw-surface-opacity`	`blur`

The layout switches are data attributes on the same elements, for CSS of your own: data-tcw-ui (the preset), data-tcw-active, data-tcw-toolbar, data-tcw-sidebar, data-tcw-intervals and data-tcw-separators (on / off).

The chart's tags

The widget hands tagRadius to its chart (a shape in chartOptions.shapes stays until you call setUI). On a bare Chart, set the shape yourself; it lasts across theme switches. Price tags, axis and crosshair pills, order, position and bracket tags and period-level tags take it.

const chart = new Chart(host, { shapes: { tagRadius: 4 } })
chart.setShapes({ tagRadius: 999 })   // pill price tags, axis pills and order badges
chart.getShapes()

Volume colours

Volume bars take the theme's volumeUp and volumeDown. volumeColor(candleColor) gives the candle colour at the volume's opacity, so in a theme of your own the bars stay a backdrop under the candles. The widget does this itself when its settings change the candle colours, and a theme spread from a preset that only changes candleUp / candleDown gets volume in those colours too.

import { DARK_THEME, volumeColor } from '@tradecanvas/chart'

chart.setTheme({
  ...DARK_THEME,
  candleUp: '#26a17b',
  candleDown: '#e0525f',
  volumeUp: volumeColor('#26a17b'),
  volumeDown: volumeColor('#e0525f'),
})