커스터마이징

가장 가벼운 손질부터 가장 깊은 수정까지, 차트를 내 것으로 만드는 모든 방법입니다. 대부분의 앱에는 그중 두세 가지면 충분합니다: 테마 하나, 스위치 몇 개, 직접 만든 버튼 하나.

무엇을 바꾸려면 무엇을 쓰나

바꾸고 싶은 것	사용할 것
색	`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를 쓰세요: 같은 엔진에 위젯만 없습니다.