Personalización

Todas las formas de hacer tuyo el gráfico, del retoque más ligero al más profundo. La mayoría de las apps necesitan dos o tres: un tema, unos cuantos interruptores, un botón propio.

● DemosTu propio aspectoDatos de mercado simulados, generados en tu navegador

Qué usar para cada cosa

Quieres cambiar	Usa
Los colores	`theme` (`'dark'`, `'light'` o un tema tuyo), `setTheme` — API
Las esquinas, los tamaños, la tipografía y las barras del widget	`ui` / `setUI` — Estilos
Una parte del aspecto del gráfico: la cuadrícula, la cruz, los colores de un tipo de gráfico	`applyOverrides` por clave — Estilos
Las líneas de un indicador, el fondo de un panel	`updateIndicatorStyle(id, { plots })`, `setPaneStyle`
Qué partes del widget se ven	`features` / `setFeatures` — más abajo
Lo que el usuario puede hacer en el gráfico: dibujar, operar, hacer zoom	Las features del propio gráfico: `chartOptions: { features: { drawings: false } }`
Botones, menús y elementos de estado propios	`addToolbarButton`, `addToolbarDropdown`, `addSidebarButton`, `addStatusBarItem`, `getSlot`, los ganchos de menú — más abajo
Atajos de teclado propios	`addHotkey` — más abajo
Tu propio CSS	Los ganchos estables: `--tcw-*`, `data-tcw-part` — más abajo
Los textos del widget	`locale`, `messages` — más abajo
Indicadores, herramientas de dibujo o tipos de gráfico propios	Plugins
Toda la interfaz	El `Chart` sin interfaz, con la tuya alrededor — API

Interruptores de funciones

Cada parte del widget tiene un interruptor, y todos están encendidos hasta que los apagas. Un nombre sin punto es una capacidad entera, apagada allí donde aparezca: alerts quita la campana, las entradas de alerta de los menús y los avisos de alerta. Un nombre con punto es un solo lugar: toolbar.alerts quita solo la campana, y los menús siguen ofreciendo alertas. Los interruptores cambian mientras el widget funciona.

const widget = new ChartWidget(host, {
  features: {
    'toolbar.replay': false,          // un botón
    'sidebar.patterns': false,        // una sección de herramientas de dibujo
    'menu.chart.exportData': false,   // una entrada de menú
    hotkeys: false,                   // todos los atajos del widget
  },
})

widget.setFeatures({ sidebar: false, statusBar: false })   // un gráfico limpio, en marcha
widget.isFeatureOn('sidebar')        // false
widget.getFeatures()                 // todos los interruptores, encendidos o apagados
grid.setFeatures({ toasts: false })  // cada gráfico de un ChartWidgetGrid

Los nombres son un compromiso: llegan nuevos, ninguno cambia de nombre. Están en WIDGET_FEATURES y TypeScript los comprueba; un nombre desconocido se descarta con un aviso.

Los interruptores muestran y ocultan las partes del propio widget. Para impedir algo en el gráfico mismo —dibujar, operar, hacer zoom, una temporalidad— usa las features del gráfico (chartOptions.features). Las partes que traen datos o almacenamiento siguen siendo opciones: trading, watchlist, depthLadder y layouts deciden si existen, y los interruptores ocultan sus botones.

Las opciones de encendido y apagado anteriores son estos mismos interruptores, y siguen como estaban:

Opción	Interruptores
`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`	El interruptor del mismo nombre

Todos los interruptores

Grupo	Interruptores
Barras	`toolbar` `sidebar` `statusBar`
Capacidades	`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`
Barra de herramientas	`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`
Barra de dibujo	`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`
Barra de estado	`statusBar.range` `statusBar.goToDate` `statusBar.market` `statusBar.connection` `statusBar.symbol` `statusBar.rangeTimeframe`
Sobre el gráfico	`indicatorLegend.values` `indicatorLegend.visibility` `indicatorLegend.settings` `indicatorLegend.remove` `indicatorLegend.more` `pane.move` `pane.collapse` `pane.maximize` `navigation.zoom` `navigation.scroll` `navigation.reset` `selectionToolbar`
Menús	`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`
Atajos	`hotkeys.commandPalette` `hotkeys.symbolSearch` `hotkeys.save` `hotkeys.tools` `hotkeys.invertScale` `hotkeys.goToDate` `hotkeys.help`

Algunos hacen más de lo que dice su nombre: con indicatorLegend apagado, los paneles recuperan su título; menu.chart.* vale tanto para el menú del clic derecho como para el "+" junto al eje de precios; compare quita el botón de añadir del árbol de objetos, y las comparaciones ya puestas siguen en la lista; toasts calla los avisos del propio widget (sus errores se siguen mostrando), y los tuyos con widget.toast() también se muestran. selectionToolbar apagado oculta la barra sobre un dibujo seleccionado; el menú del botón derecho sigue. statusBar.rangeTimeframe apagado mantiene la temporalidad cuando un rango de la barra de rangos es más largo de lo que caben sus barras; encendido, cambia a semanal o mensual y vuelve.

Sus propios avisos pueden llevar un icono del conjunto del widget, por nombre ('bell', 'check', 'info'…), como el aviso de alerta del widget lleva la campana. El widget no usa emoji en ningún sitio: todos los iconos, también las etiquetas del propio gráfico, vienen de un mismo conjunto.

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

Tus propias partes

Tus botones, menús y elementos van en las barras del widget, se ven como los suyos y siguen su tema y su aspecto. Cada uno devuelve un manejador para cambiarlo o quitarlo, y se muestra mientras se muestre su barra.

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

widget.addToolbarDropdown({
  id: 'scans',
  label: 'Scans',
  icon: 'layers',
  side: 'left',                              // con los controles del gráfico
  items: () => [                             // se piden cada vez que se abre
    { 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() })   // sustituye al atajo del widget con las mismas teclas; también en la hoja de atajos (?)

// Cualquier otra cosa tuya: junto a los controles de la barra, bajo los de la barra lateral,
// en un extremo u otro de la barra de estado, o sobre el gráfico
widget.getSlot('chart')?.append(myOverlay)   // la capa deja pasar el puntero; da pointer-events: auto a lo tuyo

Ranuras: toolbar.left, toolbar.right, sidebar, statusBar.left, statusBar.right, chart.

Tus entradas de menú

Tus entradas van al final de los menús del widget; se piden cada vez que uno se abre, con el lugar donde se abrió.

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

Tu propio CSS

El widget forma parte de tu página, no de un iframe, así que tu CSS llega a él. Estos ganchos se mantienen durante toda la 1.x:

Las variables --tcw-* en .tcw-root: los tokens del aspecto (ver Estilos).
[data-tcw-part~="toolbar.screenshot"]: cada parte lleva los nombres de sus interruptores, así que una regla la encuentra por el mismo nombre.
.tcw-root[data-tcw-off~="sidebar"]: los interruptores apagados, en la raíz del widget.
[data-host-button="id"], [data-host-item="id"]: tus propios botones y elementos de estado, por el id que les diste.

Los demás nombres de clase son del propio widget y pueden cambiar: aplica estilos mediante los ganchos.

/* tu botón de la barra en el color de acento */
.tcw-root [data-host-button="news"] { color: var(--tcw-accent); }
/* un panel tuyo más ancho mientras las herramientas de dibujo están apagadas */
.my-layout:has(.tcw-root[data-tcw-off~="sidebar"]) .my-panel { width: 320px; }

Textos

El widget habla 30 idiomas (locale; inglés y vietnamita vienen incluidos, los demás se cargan desde @tradecanvas/chart/widget/locales). messages cambia cualquiera de sus textos, encima de los del idioma. Los nombres de los indicadores no cambian.

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

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

Más a fondo

Los indicadores, herramientas de dibujo y tipos de gráfico propios se registran como plugins y funcionan como los incluidos, también en los menús. Para una interfaz del todo tuya, usa el Chart sin interfaz: el mismo motor, sin el widget.