ウィジェットのスタイル設定

ウィジェットの外観はトークンの集まりです。パーツの種類ごとの角の丸み、コントロールとバーのサイズ、文字、枠線、影、 選択中のボタンの見せ方、そしてツールバーと描画ツールを端に沿わせるか浮かせるか。プリセットから始めて、好きなところを 変えられます。色はテーマ（dark / light。API リファレンスを参照）が 受け持ち、どの外観もどちらのテーマとも組み合わせられます。

プリセット

プリセット	外観
studio（既定）	コントロールは 7 px、メニューは 11 px、ダイアログは 16 px の角丸。グループは区切り線ではなく余白で分け、メニューは 柔らかい影の上に浮かび、時間足のボタンはセグメント型のトラックに収まり、選択中のボタンは淡い色で塗られます。
terminal	高密度で角張った外観。角は 2 px、コントロールは 26 px、グループの間に区切り線が入り、ラベルは大文字で、選択中の ボタンには下線が付きます。チャート上の価格ラベルも角張った形になります。
capsule	価格ラベルも含め、あらゆる所がピル形です。ツールバーと描画ツールは島のように浮かび、メニューはすりガラス風で、 選択中のボタンは塗りつぶしのピルになります。

外観を選ぶ

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()

独自の外観

テーマはプリセット（指定しなければ Studio）から始まり、指定した項目だけを変更します。スケールで設定した角の丸みは、 そのスケールに従うすべてのパーツに反映されます。パーツ個別の値を設定した場合は、そちらが使われます。

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
})

フィールド	設定する内容
radius	角の丸みのスケール xs、sm、md、lg、xl（px、0–999）。
components	パーツ個別の角の丸み：control（ボタン）、input、menu、dialog、 panel（アラート、データウィンドウ、注文チケット）、tooltip、tag、toast、 toolbar と sidebar（浮かせたときに見える、それ自体の枠）。既定では、コントロールと入力欄は md、メニューとパネルは lg、ダイアログは xl、ツールチップとタグは sm に従います。
density / sizes	toolbar の高さ、control と controlSmall の高さ、icon、 sidebar の幅、menuItem の高さ（px）。
font	フォントファミリー（CSS のリスト）、本文の size（11–20 px。小さいサイズはこれに連動）、ウェイト、そしてセクション 見出しなど小さなラベルの大文字・小文字と字間（em）。
borders	枠線の太さと、ツールバーのグループ間や描画ツールの間に区切り線を入れるかどうか。
shadows	メニュー、ダイアログ、ツールチップの CSS の影。
blur	すりガラス風のメニュー（px）。0 より大きいと、メニューの背後にチャートがぼけて透けて見えます。
active	選択中のボタンの見せ方：淡い色の塗り、塗りつぶしのピル、または下線。
toolbar / sidebar	端に沿わせるか、島のように浮かせるか。
intervals	時間足のボタンをそのまま並べるか、セグメント型のトラックに収めるか。
tagRadius	チャートが描く価格ラベル、軸のピル、注文バッジの角の丸み。

使えない値（範囲外の値や、宣言の外に抜け出しうる CSS）は無視され、プリセットの値がそのまま残ります。

フォント

ウィジェットはフォントを読み込みません。名前を指定するだけで、ブラウザーがリストの順にフォールバックします。 Studio は Manrope、次に Inter、Terminal は IBM Plex Sans Condensed と IBM Plex Mono、Capsule は Sora を指定しています。 使いたいフォントは自分で読み込んでください。

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

CSS 変数

トークンは、ウィジェットのルート要素（とそのダイアログ）に設定された CSS 変数です。ui オプションがなければ 値はスタイルシートのもの（つまり Studio の値）のままなので、独自の CSS で設定できます。ウィジェットは自身の スタイルシートをページの先頭に置くため、.tcw-root に書いたあなたのルールが優先されます。ui を指定すると、ウィジェットが要素に直接値を書き込み、そちらが優先されます。

.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;
}

変数	元になる設定
--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（と -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

レイアウトの切り替えは、同じ要素の data 属性として公開されており、独自の CSS に使えます： data-tcw-ui（プリセット）、data-tcw-active、data-tcw-toolbar、 data-tcw-sidebar、data-tcw-intervals、data-tcw-separators（on / off）。

チャートの見た目：スタイルのオーバーライド

テーマはチャート全体の色を決めます。チャートが描くどの部分も、キーで個別に設定できます：方向ごとのグリッド線、 クロスヘア、軸、ペイン、凡例、最新価格、出来高、セッションの区切り、そしてチャートタイプごとのメイン系列。 設定していないキーはテーマに従うので、テーマを切り替えれば設定していない部分の色も変わります。

import { Chart } from '@tradecanvas/chart'

const chart = new Chart(host, {
  overrides: { 'grid.vertical.visible': false },       // 最初から
})

chart.applyOverrides({
  'series.candlestick.upColor': '#26a69a',              // 上昇/下落のあるタイプはすべてこれに従う
  'series.candlestick.downColor': '#ef5350',
  'grid.horizontal.style': 'dotted',
  'crosshair.vertical.style': 'solid',
  'crosshair.labelBackground': '#2962ff',
  'lastPrice.style': 'solid',
  'panes.background': '#0d1117',
  'legend.textColor': '#c9d1d9',
})
chart.applyOverrides({ 'legend.textColor': null })      // null でキーを外す
chart.resetOverrides(['grid.horizontal.style'])         // またはキーを指定
chart.setOverrides({ 'background.color': '#000' })      // レイヤーをまるごと

chart.getStyleValue('series.bar.upColor')               // '#26a69a': キーの最終的な値
chart.getStyle().grid.vertical                          // { visible: false, color, style, width }
chart.on('styleChange', (e) => e.payload.layer)         // 'host' | 'user'

キー

キー	設定する内容
background.color	チャートの背景（ペインに独自の背景がなければペインも）。
panes.background, .separatorColor, .titleColor	インジケーターのペイン：背景、上端のバー、名前。
grid.horizontal.*, grid.vertical.*	visible、color、style（solid · dashed · dotted）、width。方向ごとに別々。
crosshair.horizontal.*, crosshair.vertical.*	クロスヘアの線にも同じ 4 つ（既定は破線）。
crosshair.labelBackground, .labelTextColor	軸とペインの目盛り上の価格・時刻ラベル。
axis.price.lineColor, .textColor, axis.time.*	各軸の線とラベル（ペインの目盛りは価格軸に従う）。
legend.textColor, .labelColor	凡例の値と、そのラベル（O、H、L、Vol）。
lastPrice.visible, .upColor, .downColor, .style, .width	最新価格の線とタグ。未設定なら色はメイン系列に従う。
volume.upColor, .downColor	出来高のバー。
sessionBreaks.color, .style, .width	日・週・月の区切り線。
highLow.color, watermark.color	高値・安値の線、ウォーターマーク。
trading.buyColor, .sellColor, .profitColor, .lossColor, .entryColor	注文（買い・売り）とポジション（利益・損失・エントリー）。チャート上と価格軸の両方で、取引設定の色より優先されます。
markers.longColor, .shortColor, .neutralColor	シグナルのマーク。それ自身のスタイルより優先されます。
tradeZones.profitColor, .lossColor, .activeColor	取引ゾーン：勝ち、負け、建玉中。
drawings.handleColor	選択中の描画のハンドル（未設定なら白）。
series.<type>.*	そのタイプで描かれるときのメイン系列：upColor、downColor、wickUpColor、 wickDownColor（ローソク足、平均足、出来高ローソク足、エクイボリューム）、color / lineColor と lineWidth（ライン、ステップライン、マーカー付きライン、エリア、HLC エリア、ベースライン）、topColor と bottomColor（エリア、HLC エリア）。

CHART_STYLE_KEYS にはすべてのキーと値の種類が並び、TypeScript が書いた時点でキーと値を検査します。 上昇/下落の色は series.candlestick.*、線の色と太さは series.line.*、塗りは series.area.*、最後にテーマに従います。実体の色を設定すると、ヒゲもその色になります。 不明なキーや値は警告とともに無視されます。

アプリのものとユーザーのもの

オーバーライドには 2 つのレイヤーがあります。あなたのもの（layer: 'host'、既定）はテーマを切り替えても残り、 保存されません。ユーザーのもの（layer: 'user'）はあなたのものより優先され、設定したテーマごとに保たれ — ダークテーマで選んだ色はダークテーマに戻ると戻ってきます — saveState() で保存されます。ウィジェットの設定は ユーザーのレイヤーに書き込み、リセットはどのテーマでもそのテーマの色に戻します。 「スタイル」タブはこれらのキーでチャートの各部分を設定し、表示中のチャートタイプの色も含みます。「取引」タブは注文、 ポジション、シグナルのマーク、取引ゾーンの色を設定します。部品自身に任せた色は「自動」と表示され、「自動」で戻せます。

chart.applyOverrides({ 'background.color': '#0b0b0f' }, { layer: 'user' })
chart.getOverrides({ layer: 'user' })                 // 現在のテーマでのユーザーのもの
chart.getTheme()                           // 設定したとおりのテーマ：オーバーライドは別に持つ

グリッドとクロスヘアのオプション（grid.hLineColor、crosshair.vLine.style…）は対応するキーの 省略形です。複数チャートのグリッドはすべてのチャートにオーバーライドを適用します：grid.applyOverrides(patch)。 React、Vue、Svelte のコンポーネントは overrides プロパティで受け取ります。

インジケーターのプロットとペイン

// プロットごとの線種と表示、キーで指定（色と太さは colors / lineWidths のまま）
chart.updateIndicatorStyle(macdId, { plots: { signal: { lineStyle: 'dashed' }, histogram: { visible: false } } })

// これから追加する同じ種類のインジケーターの初期スタイル
chart.setIndicatorDefaults('ema', { colors: ['#f5a623'], lineWidths: [2] })

// ペイン独自の背景と区切り線。インジケーターとともに保存
chart.setPaneStyle(rsiId, { background: '#101418', separator: '#f5a623' })

非表示のプロットは値タグも凡例の値も出ません。すべてのインジケーターが非表示のプロットを描かず、ほぼすべてが プロットの線種にも従います。独自の図形を描く一部（パラボリック SAR の点、Supertrend、ジグザグ、 出来高プロファイル）は自分の線を保ちます。

チャートのラベル

ウィジェットは tagRadius を自身のチャートに渡します（chartOptions.shapes で指定した形は、 setUI を呼ぶまで保たれます）。ウィジェットを使わない素の Chart では、形を自分で設定して ください。この設定はテーマを切り替えても保たれます。この形は、価格ラベル、軸とクロスヘアのピル、注文・ポジション・ ブラケット注文のラベル、前期間のレベルのラベルに使われます。

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

OHLCV 凡例

チャート上部の凡例はポインタ下のバー（なければ最後のバー）を表示します：始値、高値、安値、終値、変化と出来高。各値は桁が変わっても位置を保つので、リアルタイムの更新でちらつきません。まるごと消すことも、必要な行だけにすることもできます。ウィジェットではルックのフォントを、その下に並ぶインジケーター行と同じサイズで使います。setUI は自前の setLegend の後でもそれを設定し直します。

new Chart(host, { features: { legend: false } })   // no legend at all
chart.setLegend({ visible: false })                  // or at any time
chart.setLegend({
  showSymbol: false, showOHLC: true, showChange: true, showVolume: false,
  position: 'top-right',
  fontSize: 11,
  fontFamily: 'Inter, sans-serif',                   // null: the theme's font
})

// The widget: start with it off (the user can still turn it on in Settings)
new ChartWidget(host, { chartOptions: { features: { legend: false } } })

出来高の色

出来高バーはテーマの volumeUp と volumeDown （または volume.* キー） を使います。volumeColor(candleColor) はローソク足の色を出来高用の透明度にした色を返すので、独自のテーマでもバーはローソク足の背景にとどまります。widget の設定でローソク足の色を変えたときは、widget が自動でこれを行います。プリセットを元に candleUp / candleDown だけを変えたテーマでも、出来高はその色になります。

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

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