カスタマイズ

軽い調整から深い作り込みまで、チャートを自分のものにするすべての方法です。たいていのアプリに必要なのは二つか三つ：テーマ、いくつかのスイッチ、自前のボタンです。

何を変えるなら何を使うか

変えたいもの	使うもの
色	`theme`（`'dark'`、`'light'` または独自のテーマ）、`setTheme` — API
ウィジェットの角、サイズ、書体、各バー	`ui` / `setUI` — スタイル設定
チャートの見た目の一部：グリッド、クロスヘア、チャートタイプの色	キーで `applyOverrides` — スタイル設定
インジケーターの線、ペインの背景	`updateIndicatorStyle(id, { plots })`、`setPaneStyle`
ウィジェットのどの部品を表示するか	`features` / `setFeatures` — 下記
チャート上でユーザーができること：描画、取引、ズーム	チャート自体の features：`chartOptions: { features: { drawings: false } }`
独自のボタン、メニュー、ステータス項目	`addToolbarButton`、`addToolbarDropdown`、`addSidebarButton`、`addStatusBarItem`、`getSlot`、メニューのフック — 下記
独自のキーボードショートカット	`addHotkey` — 下記
独自の CSS	安定したフック：`--tcw-*`、`data-tcw-part` — 下記
ウィジェットの文言	`locale`、`messages` — 下記
独自のインジケーター、描画ツール、チャートタイプ	プラグイン
UI のすべて	ヘッドレスの `Chart` と、それを囲む独自の UI — API

機能スイッチ

ウィジェットのあらゆる部品にスイッチがあり、オフにするまではすべてオンです。ドットのない名前は機能まるごとで、それが現れるすべての場所でオフになります：alerts はベルのボタン、メニューのアラート項目、アラートの通知を取り除きます。ドットのある名前は一か所です：toolbar.alerts はベルだけを取り除き、メニューからは引き続きアラートを追加できます。スイッチはウィジェットの動作中に切り替えられます。

const widget = new ChartWidget(host, {
  features: {
    'toolbar.replay': false,          // ボタン一つ
    'sidebar.patterns': false,        // 描画ツールのグループ一つ
    'menu.chart.exportData': false,   // メニュー項目一つ
    hotkeys: false,                   // ウィジェットのすべてのキー操作
  },
})

widget.setFeatures({ sidebar: false, statusBar: false })   // 動作中にすっきりしたチャートへ
widget.isFeatureOn('sidebar')        // false
widget.getFeatures()                 // すべてのスイッチのオン・オフ
grid.setFeatures({ toasts: false })  // ChartWidgetGrid のすべてのチャート

名前は約束事です：新しい名前は増えますが、改名はしません。WIDGET_FEATURES に一覧があり、TypeScript がチェックします。不明な名前は警告とともに無視されます。

スイッチが表示・非表示にするのはウィジェット自身の部品です。チャートそのものでの操作——描画、取引、ズーム、ある時間足—— を止めるには、チャートの features（chartOptions.features）を使います。データやストレージを伴う部品はオプションのままです：trading、watchlist、depthLadder、layouts がそれ自体の有無を決め、スイッチはそのボタンを隠します。

従来のオン・オフのオプションはこれらのスイッチそのもので、これまでどおり使えます：

オプション	スイッチ
`toolbar: false`	`toolbar`
`drawingTools: false`	`sidebar`、`drawingSettings`、`hotkeys.tools`、`menu.chart.horizontalLine`
`statusBar: false`	`statusBar`、`goToDate`
`rangeBar: false`	`statusBar.range`、`goToDate`
`accountPanel: false`	`accountPanel`、`orderTicket`
`indicatorLegend`、`settings`、`alerts`、`objectTree`、`indicatorTemplates`、`intervalTyping`、`symbolInfo`、`navigation`、`dragDropImport`、`customTimeframes`、`fullscreen`	同じ名前のスイッチ

すべてのスイッチ

グループ	スイッチ
バー	`toolbar` `sidebar` `statusBar`
機能	`alerts` `objectTree` `symbolInfo` `symbolSearch` `settings` `indicatorSettings` `drawingSettings` `dataWindow` `commandPalette` `hotkeySheet` `goToDate` `replay` `screenshot` `copyImage` `shareView` `autoFib` `themeToggle` `fullscreen` `accountPanel` `orderTicket` `bracketOrders` `depthLadder` `layouts` `indicatorTemplates` `compare` `indicatorLegend` `navigation` `customTimeframes` `intervalTyping` `dragDropImport` `hotkeys` `toasts`
ツールバー	`toolbar.symbol` `toolbar.symbolInfo` `toolbar.timeframes` `toolbar.timeframeMenu` `toolbar.chartType` `toolbar.indicators` `toolbar.layouts` `toolbar.replay` `toolbar.bracketOrders` `toolbar.depthLadder` `toolbar.accountPanel` `toolbar.objectTree` `toolbar.alerts` `toolbar.screenshot` `toolbar.settings` `toolbar.themeToggle` `toolbar.fullscreen`
描画サイドバー	`sidebar.cursor` `sidebar.favorites` `sidebar.lines` `sidebar.fibonacci` `sidebar.patterns` `sidebar.forecasting` `sidebar.annotation` `sidebar.style` `sidebar.magnet` `sidebar.eraser` `sidebar.zoomArea` `sidebar.stayInDrawing` `sidebar.undo` `sidebar.redo` `sidebar.clear`
ステータスバー	`statusBar.range` `statusBar.goToDate` `statusBar.market` `statusBar.connection` `statusBar.symbol` `statusBar.rangeTimeframe`
チャート上	`indicatorLegend.values` `indicatorLegend.visibility` `indicatorLegend.settings` `indicatorLegend.remove` `indicatorLegend.more` `pane.move` `pane.collapse` `pane.maximize` `navigation.zoom` `navigation.scroll` `navigation.reset` `selectionToolbar`
メニュー	`menu.chart` `menu.chart.alert` `menu.chart.order` `menu.chart.orderTicket` `menu.chart.horizontalLine` `menu.chart.resetView` `menu.chart.drawings` `menu.chart.exportData` `menu.chart.settings` `menu.chart.scale` `menu.chart.goToDate` `menu.chart.paneScale` `menu.priceAxisAdd` `menu.drawing` `menu.drawing.settings` `menu.drawing.alert` `menu.drawing.order` `menu.drawing.group` `menu.drawing.lock` `menu.drawing.hide` `menu.drawing.duplicate` `menu.drawing.delete`
キー操作	`hotkeys.commandPalette` `hotkeys.symbolSearch` `hotkeys.save` `hotkeys.tools` `hotkeys.invertScale` `hotkeys.goToDate` `hotkeys.help`

名前以上のことをするスイッチもあります：indicatorLegend をオフにするとペインに自分のタイトルが戻ります。 menu.chart.* は右クリックメニューと価格軸の横の "+" の両方に効きます。compare はオブジェクトツリーの追加ボタンを取り除き、表示中の比較は一覧に残ります。toasts はウィジェット自身の通知を止めます（エラーは表示されます）。 widget.toast() による通知も表示されます。 selectionToolbar をオフにすると選択した描画の上のツールバーが隠れます。右クリックメニューは残ります。 statusBar.rangeTimeframe をオフにすると、レンジバーの期間がバーに収まらなくても時間足を保ちます。オンでは週足や月足に切り替え、また戻します。

独自の通知にも、ウィジェットのアイコンセットのアイコンを名前で付けられます（'bell'、'check'、'info'…）。ウィジェットのアラート通知がベルを付けるのと同じです。ウィジェットはどこにも絵文字を使いません。チャート自身のラベルを含め、すべてのアイコンは一つのセットから来ています。

widget.toast('Order filled at 64,200', 'info', 'check')  // the icon set's check before the text
widget.toast('Feed lost', 'error', 'info')

独自の部品

独自のボタン、メニュー、項目はウィジェットの各バーに収まり、ウィジェット自身のものと同じに見え、テーマと見た目に従います。どれも変更・削除用のハンドルを返し、そのバーが表示されている間だけ表示されます。

widget.addToolbarButton({ id: 'news', label: 'News', icon: 'bell', toggle: true, onClick })

widget.addToolbarDropdown({
  id: 'scans',
  label: 'Scans',
  icon: 'layers',
  side: 'left',                              // チャートの操作ボタンの並び
  items: () => [                             // 開くたびに取得
    { label: 'Breakouts', onSelect: () => runScan('breakouts') },
    { label: 'Live only', checked: liveOnly, onSelect: () => (liveOnly = !liveOnly) },
  ],
})

const ruler = widget.addSidebarButton({ id: 'ruler', label: 'Ruler', icon: 'ruler', toggle: true,
  onClick: () => ruler?.setActive(toggleRuler()) })

const latency = widget.addStatusBarItem({ id: 'latency', text: '12 ms', label: 'Latency' })
latency?.setText('15 ms')
widget.addHotkey({ keys: 'Alt+N', label: 'New note', onPress: () => addNote() })   // 同じキーのウィジェットのショートカットを置き換え、ショートカット一覧（?）にも出ます

// そのほか何でも：ツールバーの操作ボタンの横、サイドバーのボタンの下、
// ステータスバーの両端、またはチャートの上に
widget.getSlot('chart')?.append(myOverlay)   // ポインターは通り抜けます。自分の要素には pointer-events: auto を

スロット：toolbar.left、toolbar.right、sidebar、statusBar.left、statusBar.right、chart。

独自のメニュー項目

独自の項目はウィジェットのメニューの最後に並びます。メニューが開くたびに、開いた場所とともに取得されます。

new ChartWidget(host, {
  chartMenuItems: ({ area, price }) => area === 'plot' && price !== undefined
    ? [{ label: 'Copy price', onSelect: () => copy(price) }]
    : [],
  drawingMenuItems: ({ id, type, selected }) => [{ label: 'Share', icon: 'link', onSelect: () => share(id) }],
  indicatorMenuItems: ({ instanceId, indicatorId }) => [{ label: 'Explain', onSelect: () => explain(indicatorId) }],
})

独自の CSS

ウィジェットは iframe ではなくページの一部なので、あなたの CSS が届きます。次のフックは 1.x の間変わりません：

.tcw-root 上の --tcw-* 変数：見た目のトークン（スタイル設定を参照）。
[data-tcw-part~="toolbar.screenshot"]：各部品はそのスイッチの名前を持つので、同じ名前でルールから見つけられます。
.tcw-root[data-tcw-off~="sidebar"]：オフのスイッチ。ウィジェットのルート要素に付きます。
[data-host-button="id"]、[data-host-item="id"]：独自のボタンとステータス項目を、付けた id で。

それ以外のクラス名はウィジェット内部のもので、変わることがあります。フックを使ってスタイルしてください。

/* 独自のツールバーボタンをアクセント色に */
.tcw-root [data-host-button="news"] { color: var(--tcw-accent); }
/* 描画ツールがオフの間は自分のパネルを広く */
.my-layout:has(.tcw-root[data-tcw-off~="sidebar"]) .my-panel { width: 320px; }

文言

ウィジェットは 30 言語に対応しています（locale。英語とベトナム語は組み込み、ほかは @tradecanvas/chart/widget/locales から読み込みます）。messages は言語の文字列の上からどの文字列でも変えられます。インジケーター名はそのままです。

import { de } from '@tradecanvas/chart/widget/locales'

new ChartWidget(host, {
  locale: 'de',
  messages: { ...de, 'toolbar.indicators': 'Studien' },
})

さらに深く

独自のインジケーター、描画ツール、チャートタイプはプラグインとして登録すれば、メニューも含めて組み込みのものと同じように動きます。UI をすべて自前にしたいなら、ヘッドレスの Chart を使います：同じエンジンで、ウィジェットなしです。