API リファレンス

トップレベルクラス Chart、ChartWidget、ChartWidgetGrid、ChartGrid の公開 API です。

Chart

ヘッドレスなレンダラーです。UI は自前で用意し、イベントを購読し、メソッド呼び出しで状態を変更します。

コンストラクター

new Chart(host: HTMLElement, options?: ChartOptions)

データ

メソッド	用途
setData(data)	系列全体を置き換えます。
appendBar(bar)	新しいバーを追加します。有効な場合は自動スクロールします。
appendBars(bars)	まとめて追加します。インジケーターの再計算は 1 回だけです。
updateLastBar(bar)	形成中の現在のバーを更新します。
updateLastBarFromTick(tick)	ティックを最後のバーに統合します。
getData()	元の OHLC 系列を取得します。

バーの時刻はエポックのミリ秒または秒で、系列全体で 1 つの単位です。チャートは最新のバーから一度だけ単位を読み取ります：barTimeUnit(data) は 1（ミリ秒、1e11 以上）か 1000（秒）を返します。そのためミリ秒の系列では、1e12 未満となる 2001 年以前の日付も正しく保たれます。1 つの系列は 1 つの単位にしてください。チャートが返す時刻（イベント、getData()）もその単位です。

チャートタイプとテーマ

メソッド	用途
setChartType(type)	18 種類のいずれか。チャートタイプを参照してください。
setTheme(name | theme)	組み込みテーマを切り替えるか、独自のテーマを設定します。getTheme() は設定したとおりに返します。
applyOverrides(patch, { layer })	チャートの任意の部分をキーでスタイル設定（'grid.vertical.visible'、'series.candlestick.upColor'…）。null でキーを外します。スタイルを参照。
setOverrides(overrides, { layer }) · resetOverrides(keys?, { layer })	レイヤーをまるごと置き換え。キー（またはすべて）を外す。
getOverrides({ layer }) · getStyle() · getStyleValue(key)	レイヤーのオーバーライド、解決された見た目、キーの最終的な値。
setTimeframe(tf)	表示中の時間足を切り替え、ライブストリームを接続し直します。

レンダラー

メソッド	用途
renderer オプション	'canvas'（既定）、'webgl'、または 'auto'（ハードウェア GPU のときだけ WebGL）。
setRenderer(mode)	実行中に切り替えます。実際に描いているレンダラーを返します（WebGL 2 がなければ 'canvas'）。
getRenderer()	'canvas' または 'webgl'。

GPU が描くものと計測値：パフォーマンス → WebGL レンダラー。

インジケーター

メソッド	用途
addIndicator(id, params?, position?)	オーバーレイ型またはパネル型のインジケーターを追加し、インスタンス id を返します。
updateIndicator(instanceId, params)	表示中のインジケーターを変更します。
removeIndicator(instanceId)	削除して破棄します。
updateIndicatorStyle(instanceId, style)	色、線の太さ、不透明度、そしてプロットごとの線種と表示（plots: { signal: { lineStyle: 'dashed' } }）。
setIndicatorDefaults(id, style | null)	これから追加する同じ種類のインジケーターの初期スタイル。
setPaneStyle(instanceId, { background, separator } | null) · getPaneStyle(instanceId)	ペイン独自の見た目。インジケーターとともに保存。

軸とスケール

価格軸（右側の帯）と時間軸（下側の帯）は、トレーダーが使い慣れたジェスチャーで 直接ポインター操作できます：

ジェスチャー	効果
価格軸を上下にドラッグ	縦方向の価格範囲を縮める / 広げる（自動スケールは無効になります）。
時間軸を左右にドラッグ	時間軸を拡大 / 縮小します。
価格軸をダブルクリック	自動スケールを再び有効にします。
時間軸をダブルクリック	すべてのデータを表示領域に収めます。

タイムゾーン。 時間軸のラベルとクロスヘアの時刻表示は、既定ではブラウザーの ローカルタイムゾーンに従います。設定シートから、または直接、固定の UTC オフセットに 切り替えられます（ローカルに戻すこともできます）：

chart.setTimezoneOffset(-300)  // EST (UTC-5), in minutes
chart.setTimezoneOffset(330)   // IST (UTC+5:30)
chart.setTimezoneOffset(null)  // back to browser-local

同じ操作はプログラムからも行えます：

chart.setAutoScale(false)  // freeze the current price range
chart.setLogScale(true)    // switch to logarithmic price scale
chart.setInvertScale(true) // upside down (Alt+I in the widget)
chart.fitContent()         // zoom out to all data
chart.scrollToEnd()
chart.setVisibleRangePreset('3M')       // 1D 5D 1M 3M 6M YTD 1Y 5Y All
chart.setMinBarUnit(0.05)               // narrower bars, so 'All' fits a long series (0.25 by default)
chart.goToTime(Date.UTC(2025, 0, 1))    // centre that bar (Alt+G in the widget)

長い期間。バーの幅は 0.25 px より狭くならないため、それを超える期間（ノート PC での 26 年分の日足）は最新の部分だけが表示されます。ウィジェットでは、レンジバーの長い期間はバーが 1 本 2 px 以上で収まる時間足に切り替わります：5Y の日足は週足に、All は月足に。短い期間では選んだ時間足に戻り、それより細かくはなりません。切り替わるのはデータフィードが提供する（または手元のバーから集計できる）時間足だけです。features: { 'statusBar.rangeTimeframe': false } で時間足を保ちます。Chart を直接使う場合は minBarUnit（オプション、または setMinBarUnit）で 0.02 px まで狭められ、ピクセル列ごとに描画されます。

価格スケールのモード。 標準と対数のほかに、表示中の最初のバーを基準に 軸のラベルを付け直すこともできます。percentage は変化率（%）を表示し、 indexedTo100 は基準を 100 にそろえます。標準、パーセント、100 基準は同じ線形の配置を 共有し、異なるのはラベルだけです。チャート設定パネルから、または直接設定できます：

chart.setScaleMode('percentage')   // axis labels: +12.34% from first visible bar
chart.setScaleMode('indexedTo100') // first visible bar reads as 100
chart.setScaleMode('logarithmic')
chart.getScaleMode()

価格と時刻の書式

価格は独自の書式で表示できるほか、債券やその先物の呼値のように 1 ポイントの分数でも表示できます （101'16 は 101 と 32 分の 16）。この書式は、価格スケールに沿って価格を表示するすべての箇所に 適用されます。軸、クロスヘア、現在値タグ、凡例、ツールチップ、注文、アラート、描画のラベルです。軸の目盛りは ちょうど分数の区切りに置かれ、roundPrice もその単位で丸めます。インジケーターのペインは 独自の数値表示のままです。時刻も好きな書式で表示でき、フォーマッターにはそのラベルの種類が渡されます。

new Chart(host, { priceFormat: { denominator: 32 } })                    // 101'16
chart.setPriceFormat({ denominator: 32, subDenominator: 2 })            // 101'165: 16½ 32nds
chart.setPriceFormat((p) => ' 
軸がラベルを選ぶ仕組み
 
時間軸は最も大きな暦の区切りを始めるバーにラベルを付けます：年（太字）、月、日、きりのよい時刻で、互いに少なくとも 80 px 離れます。そのため 5Y では 2022 · Jul · 2023、1 か月では Oct · 8 · 15、1 日の中では 12:00 · 18:00 と読めます。ラベルは画面ではなくバーに属します：パンするとバーと一緒に動き、前に履歴を読み込んでも位置は変わりません。最も古いバーの左にはありません。月名は setNumberLocale に従い、グリッド線はラベルの位置に引かれます。
 
価格軸は高さに収まるだけのラベルを、少なくとも 30 px 離して、市場の呼値の単位に置きます。対数軸では刻みが価格とともに大きくなるので、上と同じように下にもラベルが付きます。パーセントや指数の軸では、基準からのきりのよいパーセントや指数ポイントになります。インジケーターのペインも自分の高さでラベル数を決めます。
 
マーケット：呼値の単位、値幅制限、取引セッション
 
setMarket はチャートに取引所のルールを与えます。ローソク足の色、小数点以下の桁数、呼値の単位
  （価格によって変わることもあります）、当日の上限価格と下限価格、売買単位です。 roundPrice と getPriceStep は価格が属する価格帯の呼値の単位に従うので、チャートの
  メニューから選んだ価格は常に有効な価格になり、ウィジェットの注文チケットは呼値の単位、当日の値幅、売買単位で注文を
  チェックします。プリセットには取引所の取引セッションとタイムゾーンも含まれ、getCurrentSession や独自のコードで使えます。チャートのセッションの塗りつぶしや時間外取引は setSymbolInfo から設定します。プリセットは 2025 年 5 月時点のベトナムの取引所に対応しています。HOSE（価格に応じて 10、50、
  100 ドン刻み、±7%）、その ETF とカバードワラント（10 ドン）、HNX（±10%、引け後のセッションあり）、UPCoM
  （±15%）、VN30 指数先物（0.1 ポイント刻み、±7%、8:45 開始）です。株式の売買単位は 100 株で、上昇は緑、
  下落は赤、上限価格は紫、下限価格はシアン、基準価格は黄色です。価格は株価ボードと同じく 1,000 ドン単位で、 scaleMarketPrices(preset, 1000) を使うとドン単位の価格を扱えます。
 
import {
  MARKET_HOSE, scaleMarketPrices, priceStepAt, roundToPriceStep, getCurrentSession,
  vn30fContracts, vn30fLastTradingDay,
} from '@tradecanvas/chart'

chart.setMarket(MARKET_HOSE)                 // 25350 のような価格には scaleMarketPrices(MARKET_HOSE, 1000)
chart.setPriceLimits(25.35)                  // 基準価格：前日の終値
chart.getPriceLimits()                       // { ceiling: 27.1, floor: 23.6, reference: 25.35 }
chart.roundPrice(25.37)                      // 25.35（50 ドン刻み）
chart.getPriceStep(9.5)                      // 10,000 ドン未満は 0.01

// ルールを単体で使う
priceStepAt(25.35, MARKET_HOSE)              // 0.05
roundToPriceStep(10.486, MARKET_HOSE, 'down') // 10.45
getCurrentSession(MARKET_HOSE.sessions, Date.now(), MARKET_HOSE.timeZone) // { name: 'ATC', type: 'preClose', … }、時刻だけで判定

// VN30 先物：上場中の 4 限月とその最終取引日
vn30fContracts(Date.now())                   // [{ symbol: 'VN30F2611', lastTradingDay: '2026-11-19', … }, …]
vn30fLastTradingDay(2026, 12, (day) => holidays.has(day)) // 第 3 木曜日。祝日なら前倒し
 
独自のマーケットは MarketConfig です。priceStep（価格帯ごとなら priceSteps: [{ from, step }]）、priceLimits、 volumeUnit（売買単位）、sessions、timeZone、 colorScheme を指定します。シンボル自身の minTick はマーケットの呼値の単位より優先されます。
  取引所のルールは随時変わるため、プリセットに頼る前に、その取引所の現行ルールと照らし合わせてください。
 
シンボルの比較
 
別のシンボルの変化率を価格スケール上に表示する（addCompareSymbol）ほか、その価格を専用の
  スケールや専用のペインに表示したり、チャートの終値とのスプレッドや比率を表示したりできます。後者は
  インジケーター（compareSymbol、spread）なので、ほかのインジケーターと同じく
  凡例、値ラベル、アラートを持ち、レイアウトにも保存されます。もう一方のシンボルのバーは時刻でチャートのバーに
  揃えられます。チャートは必要なバーを要求するので、時間足を変えたら改めて渡してください。correlation（終値）と correlationlog（バーごとのリターン）も同じようにもう一方のシンボルを読み、−1 から 1 の値を取ります。
 
chart.addCompareSymbol('eth', 'ETHUSDT', ethBars, '#7c4dff')   // percent change, on this scale
chart.addIndicator('compareSymbol', { symbol: 'ETHUSDT' }, 'bottom', { scale: 'left' })  // own scale
chart.addIndicator('spread', { symbol: 'ETHUSDT', mode: 'ratio' })                      // own pane
chart.addIndicator('correlation', { symbol: 'ETHUSDT', length: 20 })                    // −1 to 1, own pane

chart.on('symbolSeriesRequest', async ({ payload }) =>
  chart.setSymbolSeries(payload.symbol, await adapter.fetchHistory(payload.symbol, '1h', 1000)))
chart.getRequiredSymbols()                           // what to fetch again on a new interval
chart.setPaneScale(spreadId, { percent: true })     // a pane in percent of its first value
 
ChartWidget では、オブジェクトツリーの比較ボタンでまずシンボルを、次に表示方法（変化率、専用スケール、
  専用サブチャート、スプレッド、比率、価格またはリターンの相関）を選びます。
 
データのエクスポート
 
バーを CSV または JSON で書き出します。インジケーターのラインはそれぞれ独立した列になり、列名は凡例での
  名前と同じです。ChartWidget では、チャートの右クリックメニューにデータをエクスポート (CSV)があります。
 
chart.exportAllData('csv', 'btc-1h.csv')                 // every bar loaded
chart.exportVisibleData('json', undefined, { indicators: false })
const text = chart.getExportText('csv', { range: 'visible' })
const { bars, columns } = chart.getExportData()          // columns: { name, values }[]
 
価格帯別出来高
 
表示範囲の出来高を価格帯ごとに集計した横向きのヒストグラムです。既定ではオフで、
  プログラムから、またはウィジェットの設定シートで切り替えます：
 
chart.setVolumeProfileVisible(true)
chart.setVolumeProfileConfig({
  buckets: 48,        // resolution of the histogram
  widthRatio: 0.18,   // % of chart width
  opacity: 0.32,
  highlightPoC: true, // mark the highest-volume bucket
})
 
スイングマーカー（ピボット）
 
フラクタルなスイング高値・安値を小さな三角形で示します（確定したピボット高値の上に ▼、
  ピボット安値の下に ▲）。強さの値で、左右それぞれ何本のバーがより低くなければならないかを
  指定します。設定シートから切り替えるか、次のようにします：
 
chart.setPivotMarkersVisible(true)
chart.setPivotMarkersConfig({ left: 5, right: 5, showLabels: true })

// market-structure labels (HH / HL / LH / LL) instead of price
chart.setPivotMarkersConfig({ structureLabels: true })

// pure detection + classification are exported
import { findPivots, classifyPivots } from '@tradecanvas/core'
const pivots = findPivots(bars, 5, 5)        // [{ index, price, type }]
const structure = classifyPivots(pivots)     // adds label: 'HH'|'LH'|'HL'|'LL'
 
セッションの塗りつぶし（通常取引時間）
 
通常セッション外のバー（プレマーケット / ポストマーケットや夜間の休止時間）を暗くして、
  レギュラーセッションを際立たせます。既定は米国株式の RTH（ニューヨーク時間 09:30–16:00、
  夏時間を考慮）です。時間帯は 1 日の中の分数と、市場のタイムゾーンで設定します。
  フィードがセッション情報を提供するシンボルでは、自動的に設定されます。
 
chart.setSessionShadingVisible(true)
chart.setSessionShadingConfig({
  startMinute: 9 * 60 + 30,     // 09:30
  endMinute: 16 * 60,           // 16:00 (end-exclusive; end < start wraps midnight)
  timeZone: 'America/New_York', // or tzOffsetMinutes: -300 for a fixed offset
})
 
時間外取引。オフにすると、シンボルの通常取引時間（その timezone での SymbolInfo.sessions）の外にあるバーがチャートから外れます。外れたバーはライブのバーや履歴のページも
  含めて取り置かれ、オンに戻すと再び表示されます。日足以上のバーはそのままです。
 
chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York', sessions: [{ start: '09:30', end: '16:00' }] })
chart.setExtendedHours(false)     // or new Chart(host, { extendedHours: false })
chart.isExtendedHoursVisible()
 
前期間のレベル (PDH / PDL / PDC)
 
前日（または前週）の高値・安値・終値と、当期間の始値を、ラベル付きの水平線で表示します。
  デイトレーダーが注目するサポート / レジスタンスの水準です。設定シートから切り替えるか、
  直接指定します：
 
chart.setPeriodLevelsVisible(true)
chart.setPeriodLevelsPeriod('week')   // 'day' (PDH/PDL/PDC) | 'week' (PWH/PWL/PWC)

// pure computation is exported
import { computePeriodLevels } from '@tradecanvas/core'
const levels = computePeriodLevels(bars, 'day')  // [{ id, label, price }]
 
マーケットプロファイル (TPO)
 
価格ごとの滞在時間を示すヒストグラムです。各バーは、その値幅が触れたすべての価格帯に
  TPO を 1 つずつ加え、POC（Point of Control、最も活発な価格）とバリューエリア
  （TPO の約 70%）を浮かび上がらせます。出来高ではなく時間で重み付けする点で価格帯別出来高とは
  異なり、左端に固定されるため両方を同時に表示できます。既定ではオフで、設定シートから、
  または直接切り替えます：
 
chart.setMarketProfileVisible(true)
chart.setMarketProfileConfig({
  buckets: 48,
  widthRatio: 0.18,
  opacity: 0.32,
  valueAreaPct: 0.7,  // fraction of TPOs in the value area
  highlightPoC: true, // dashed line at the point of control
})

// split into one mini-profile per calendar-day session
chart.setMarketProfileConfig({ splitBySession: true })

// classic TPO letters per session (when zoomed in enough to be legible)
chart.setMarketProfileConfig({ splitBySession: true, letters: true })

// pure computation is exported too
import { computeMarketProfile, computeSessionProfiles } from '@tradecanvas/core'
const profile = computeMarketProfile(bars, priceMin, priceMax, { buckets: 48 })
const sessions = computeSessionProfiles(bars, priceMin, priceMax)  // per-day TPO
 
タッチとモバイル
 
ジェスチャー
操作
1 本指でドラッグ（チャート領域）
スクロール + クロスヘアを移動
2 本指でピンチ
中心点を基準に拡大縮小
長押し（約 500 ms）
バーに OHLC ツールチップを固定（Alt+クリックのモバイル版）
価格軸 / 時間軸の帯の中を 1 本指でドラッグ
対応する軸を拡大縮小
タップ
クリック：click、barClick、シグナルマーカー。描画の上なら選択
ダブルタップ
ダブルクリック：軸の上ならリセット、描画の上なら設定を開く
描画の上を 1 本指でドラッグ
移動。選択中の描画はハンドルで形を変更
描画ツール選択中：タップ、タップ — または押して、ドラッグして、離す
点を置く。押してドラッグして離すと 2 点の線を一度に描画
描画の上で長押し
そのメニュー（右クリックと同じ）
アラート・注文・ブラケットの線やペインの境界を 1 本指でドラッグ
それをドラッグ
 
指はマウスより遠くまで届きます：線まで約 16 px、ハンドルまで約 22 px（マウスは 8 px）。スクロールするページでは、pageScroll: true で縦のスワイプと通常のマウスホイールをページに任せます。チャートは横スワイプでスクロールし、2 本指または Ctrl + ホイール（トラックパッドのピンチ）でズームします。描画・線・軸への操作はチャートのままです。chart.setPageScroll(on) で実行中に切り替えられます。
 
画面幅が 640 px 未満では、モーダル（設定、ショートカット一覧、コマンドパレット、シンボル検索）が
  自動的にボトムシート形式に切り替わり、つまみ（グラブハンドル）とセーフエリアを考慮した余白が付きます。
 
計測ツール
 
Shift を押しながらチャート上をドラッグすると、2 点間のバー数 × 価格差を計測できます。
  オーバーレイには価格の Δ（絶対値と %）、バー数、時間幅が表示されます。マウスを離すとすぐに消え、
  保存される状態には含まれません。
 
イベント
 
すべてのイベントは ChartEventMap で型付けされています：
 
chart.on('orderPlace', e => /* OrderPlacePayload */)
chart.on('orderModify', e => /* OrderModifyPayload */)
chart.on('signalMarkerAdd', e => /* { marker } */)
chart.on('tradeZoneAdd', e => /* { zone } */)
chart.on('dataUpdate', e => /* { length } */)
chart.on('ordersChange', e => /* { orders } */)
chart.on('positionsChange', e => /* { positions } */)
chart.on('executionFill', e => /* { side, price, quantity, reason, pnl } */)
chart.on('chartContextMenu', e => /* { area, x, y, price, time } */)
chart.on('stateChange', () => /* 描画、インジケーター、アラート、チャートタイプ、テーマのいずれかが変わった可能性がある */)
chart.on('paneChange', e => /* { instanceId, change: 'collapsed' | 'maximized' | 'order' } */)
chart.on('chartTypeChange', e => /* { type, previous } */)
chart.on('symbolChange', e => /* { symbol, previous } */)
chart.on('timeframeChange', e => /* { timeframe, previous } */)
chart.on('historyChange', e => /* { canUndo, canRedo } */)
chart.on('drawingSelect', e => /* { ids, primary } */)
chart.on('rendererChange', e => /* { renderer: 'canvas' | 'webgl', reason?: 'unsupported' | 'contextLost' | 'contextRestored' | 'limit' } */)
 
独自の変更を元に戻す
 
recordUndo は、あなたの変更を描画やインジケーターと同じチャートの取り消し履歴に加えます。Ctrl/Cmd+Z で undo が、やり直しで redo が呼ばれます。同じ subject に対して続けて行った変更は
  1 ステップにまとまります。ChartWidget も設定とチャートタイプをこの方法で記録しています。
 
const before = panel.color
panel.color = 'red'
chart.recordUndo({ subject: 'panel-color', undo: () => (panel.color = before), redo: () => (panel.color = 'red') })
 
キーボードとスクリーンリーダー
 
フォーカスのあるチャートは、矢印キーでスクロール（Shift で 10 本ずつ）、↑/↓ または +/− でズームし、Home と End で
  先頭と末尾へ移動します。スクリーンリーダーに対しては、概要（シンボル、タイプ、時間足、現在値）を持つアプリケーションです。
  キーで表示を動かすと画面に映っている内容を伝え、カンマとピリオドでバーを 1 本ずつ読み上げます。a11y.labels でこれらを自分の言語にでき、a11y: false で無効にできます。scrollBars(n) と selectDrawing(id) は、キー操作やクリックと同じことをコードから行います。
 
new Chart(host, { a11y: { labels: { role: 'gráfico', summary: '{what}. Último precio {close}.' } } })
 
ポインターの位置から得た価格は、chart.roundPrice(price) で市場の価格刻みに合わせられます。
  シンボルの minTick の倍数に、それがなければシンボルの精度に丸めます。ChartWidget のメニュー、注文チケット、描画設定の Coordinates タブはこれを使っています。 chart.getPriceStep() はその刻みそのものを返します。
 
ChartWidget
 
Chart を完全な UI で包みます。同じインスタンスに widget.chart でアクセスできます。
 
import { ChartWidget } from '@tradecanvas/chart/widget'

const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(),
  historyLimit: 500,
  trading: true,
  features: { 'toolbar.replay': false },   // ウィジェットのスイッチ：「カスタマイズ」を参照
  onReady: (chart) => { /* ... */ },
})

widget.chart.setData(...)
widget.destroy()
 
ウィジェットのキーボードショートカット
 
ショートカット
操作
Ctrl / ⌘ + K
コマンドパレット（インジケーター、チャートタイプ、描画など）
Ctrl / ⌘ + P
シンボル検索 — 設定したシンボル一覧からのあいまい検索
Ctrl / ⌘ + S
レイアウトを保存（初回は名前を尋ねます）
0–9
時間足（5、15m、1h、1D）を入力して Enter で切り替え（intervalTyping: false で無効）
Alt + T / H / J / V / C / F
トレンドライン、水平線、水平半直線、垂直線、十字線、フィボナッチ・リトレースメント
?
キーボードショートカットの一覧を表示
Alt + チャートをクリック
カーソル位置のバーに OHLC ツールチップを固定（ライブのクロスヘアとの差分を表示）
Esc
ツールチップの固定を解除 / 描画をキャンセル
ツールバーのシンボルをクリック
シンボル検索のモーダルを開きます
ツールバーの再生ボタンをクリック
バーリプレイのスクラバーを開きます（再生 / ステップ / シーク / 速度）
 
検索対象の一覧は、実行時に widget.setSymbols(['BTCUSDT', 'ETHUSDT', …]) で更新できます。
 
データウィンドウ
 
カーソル位置のバーの正確な O/H/L/C/V、バーの変化、すべての有効なインジケーターの値を表示する
  フローティングパネルです。クロスヘアを動かすとリアルタイムに更新されます。コマンドパレット
  （Ctrl/⌘ K →「データウィンドウの表示切り替え」）から表示を切り替えます。
 
共有できる表示（ディープリンク）
 
シンボル、時間足、チャートタイプ、価格スケール、インジケーター（パラメーター込み）、描画を含む
  表示全体を、ディープリンク用のコンパクトで URL セーフな文字列にエンコードします。 shareUrl: true を指定すると、ウィジェットは読み込み時に #tcw=… ハッシュから表示を復元し、コマンドパレットの「表示を共有」アクションでリンクをクリップボードにコピーできます。
 
const widget = new ChartWidget(host, { shareUrl: true })

const token = widget.exportState()      // portable string
await widget.importState(token)         // restore a view
await widget.copyShareLink()            // copy "<url>#tcw=<token>"
 
名前付きレイアウト
 
ツールバーのレイアウトボタンで、チャートに名前を付けて保存できます。保存されるのはシンボル、時間足、
  価格スケール、チャートタイプ、インジケーター、描画、アラートです（テーマは閲覧者ごとのものなので含みません）。
  レイアウトを開く、名前を変更する、削除するといった操作は、このボタンのメニューから行います。
  開いているレイアウトは変更のたびに自動保存され、Ctrl/⌘ S でも保存できます。 storage を渡さない限り、レイアウトはこのブラウザーの localStorage に保存されます。 storage は 4 つのメソッドからなり、どれも Promise を返してかまいません。
 
import { ChartWidget, type LayoutStorage } from '@tradecanvas/chart/widget'

const server: LayoutStorage = {
  list: () => api.get('/layouts'),              // [{ id, name, symbol, timeframe, updatedAt }]
  load: (id) => api.get(`/layouts/${id}`),     // { ...summary, content } または null
  save: (layout) => api.put(`/layouts/${layout.id}`, layout),
  remove: (id) => api.delete(`/layouts/${id}`),
}

const widget = new ChartWidget(host, {
  layouts: { storage: server, autoSave: true, openLast: true },  // 使わない場合は false
})

const layouts = widget.getLayoutSession()!
await layouts.saveAs('Swing BTC')
await layouts.open(id)
layouts.current()          // { id, name, … } または null
layouts.setAutoSave(false)

// 内容だけを取り出して、好きな場所に保存する
const json = widget.getLayoutContent()
await widget.applyLayoutContent(json)
 
同梱のストレージは localStorageLayouts(prefix) と memoryLayouts() の 2 つです。
  保存された内容は慎重に読み込まれ、解析できないレイアウトは中途半端に適用されず、拒否されます。
  各レイアウトは自分の kind（'chart' または 'grid'）を記録するため、
  ウィジェットとグリッドで 1 つのストレージを共有しても、それぞれ自分のレイアウトだけを一覧に表示します。
  保存、開く、自動保存は 1 つずつ順に実行されるため、保存がその後に開いたレイアウトに書き込まれることはありません。
 
シンボルごとのレイアウト
 
これとは別に、シンボルごとのインジケーター構成、描画、アラート、チャートタイプを localStorage に自動で保存できます：
 
new ChartWidget(host, {
  symbol: 'BTCUSDT',
  symbols: ['BTCUSDT', 'ETHUSDT', 'SOLUSDT'],
  adapter: new BinanceAdapter(),
  persistLayouts: true,  // or { keyPrefix: 'myapp:', debounceMs: 2000 }
})

// Reset a single symbol's layout
widget.clearSavedLayout('BTCUSDT')
 
レイアウトはシンボルの切り替え時とウィジェットの破棄時に書き出されるため、
  ユーザーがページを離れても何も失われません。
 
ドラッグ＆ドロップでのデータ読み込み
 
CSV または JSON ファイルをチャートにドロップすると、すぐに読み込まれます。既定で有効で、 dragDropImport: false で無効にできます。パーサーは一般的な列構成
  （time, open, high, low, close, volume）、ISO 8601 形式のタイムスタンプ、
  UNIX 時間の秒 / ミリ秒に対応しています。
 
// Programmatic use
import { parseOHLCV } from '@tradecanvas/chart'

const { data, rowCount, skipped } = parseOHLCV(csvText)
chart.setData(data)
 
時間足のリサンプリング
 
最も細かい解像度の系列を widget.setData() で渡すと、ツールバーの時間足ボタンが
  クライアント側で集計します。1 つのデータセットですべての解像度をまかなうため、再取得は不要です。
  ライブアダプターが接続されていないときに有効で、resampleTimeframes: false で
  無効にできます。週足の区切りは既定で月曜日起点です（日曜日にするには weekStartsOn: 0）。
 
const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  timeframe: '1h',
  timeframes: ['5m', '15m', '1h', '4h', '1d', '1w'],
})
widget.setData(oneMinuteBars)   // base series; clicking 4h/1d/1w resamples it

// Or use the pure function directly
import { resampleOHLCV, inferTimeframeMs } from '@tradecanvas/chart'

const hourly = resampleOHLCV(oneMinuteBars, '1h')   // OHLC merged, volume summed
const fourHour = resampleOHLCV(oneMinuteBars, '4h', { weekStartsOn: 1 })
 
区切りはカレンダーを考慮します。日中足と日足は UTC エポックの境界に、週足は設定した週の開始日に、
  月足 / 四半期足 / 年足はカレンダーの境界にそろえます。入力のバーが変更されることはありません。
 
ウォッチリスト
 
シンボルのリストを並べた右側のパネルで、各行に最新価格、変化率（%）、スパークラインを表示します。リストの切り替え、
  作成、名前の変更、削除はパネルのメニューから行います。シンボルはシンボル検索（+）から追加し、削除でき、ドラッグか
  Alt+↑/↓ で並べ替えられます。各行のクオートは、アダプターの subscribeQuotes、独自のクオートソース、
  または自分で送った値から取ります。
 
const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  adapter: new BinanceAdapter(),               // its quotes fill the rows
  watchlist: {
    lists: [
      { id: 'majors', name: 'Majors', symbols: ['BTCUSDT', 'ETHUSDT'] },
      { id: 'alts', name: 'Alts', symbols: ['SOLUSDT', 'ADAUSDT'] },
    ],
    persist: true,                             // kept in this browser
    onChange: (lists, active) => save(lists),  // or keep them yourself
  },
})

widget.addToWatchlist('BNBUSDT', 'alts')
widget.setActiveWatchlist('alts')
widget.setQuotes([{ symbol: 'AAPL', last: 190.2, prevClose: 188.1 }])   // from your own feed
widget.getQuote('AAPL')
 
watchlist: true はこれまでどおり symbols の 1 つのリストを表示します。setWatchlistEntry でも引き続き行の価格、変化、スパークラインを送れます。
 
シンボル情報
 
ツールバーの ⓘ ボタン（またはコマンドパレット）から開くパネルです。シンボルの名称、最新価格と変化、次の取引開始または
  終了までのカウントダウン付きの市場の状態、当日の始値、値幅、出来高、前日終値、買気配と売気配、呼値の単位、通貨、
  タイムゾーンと取引時間、ニュースを表示します。市場が閉まっているときはステータスバーにも表示されます。
 
new ChartWidget(host, {
  symbol: 'AAPL',
  news: (symbol, limit) => api.headlines(symbol, limit),   // or the adapter's fetchNews
})
widget.toggleSymbolInfo(true)
 
ナビゲーション、元に戻す、表示方向
 
チャート上のボタン — 縮小と拡大、過去と未来へのスクロール（押し続けると動き続けます）、リセット — は、マウスが
  チャート上にあるときに表示されます（navigation: false で非表示）。設定の変更とチャートタイプの変更は、
  描画やインジケーターと同じく Ctrl/Cmd+Z で元に戻せます。アラビア語、ヘブライ語、ペルシア語、ウルドゥー語では
  ウィジェットが左右反転します（dir: 'auto'、または 'rtl' / 'ltr'）。
  チャートの時間は左から右へ進んだままです。
 
お気に入りの描画ツール
 
よく使う描画ツールを、サイドバー上部の帯に固定できます。ツール（グループのフライアウト内でも、
  帯の中でも）を右クリックすると固定 / 固定解除でき、その設定は localStorage に保存されます。
  最初に固定するツールは drawingFavorites で指定します：
 
new ChartWidget(host, {
  drawingFavorites: ['trendLine', 'horizontalLine', 'fibRetracement', 'rectangle'],
})
 
描画スタイルとテンプレート
 
描画サイドバーのパレットボタンで、スタイルのポップオーバーが開きます。次に描く描画（と選択中の描画）の
  色、線の太さ、線のスタイルを選び、名前付きのテンプレートとして localStorage に
  保存すれば、ワンクリックで再利用できます。プログラムでは次のようにします：
 
chart.setDrawingStyle({ color: '#e8505b', lineWidth: 2, lineStyle: 'dashed' })
chart.getDrawingStyle()
chart.setSelectedDrawingStyle({ color: '#1fa874' })  // restyle the selected drawing
 
オブジェクトツリー
 
ツールバーのレイヤーボタンで、有効なインジケーターと描画をすべて一覧するオブジェクトツリーの
  パネルが開きます。インジケーターは削除でき、描画は項目ごとに表示 / 非表示、ロック / ロック解除、
  設定、削除ができ、グループはその下に所属する描画とともに一覧表示されます。
  既定で有効で、objectTree: false で無効にできます。
  描画の操作は次のメソッドに対応します：
 
chart.getDrawings()                 // DrawingState[] (id, type, visible, locked)
chart.setDrawingVisible(id, false)  // hide a single drawing
chart.setDrawingLocked(id, true)    // lock it from edits
chart.removeDrawing(id)
chart.groupDrawings(ids, 'Weekly levels')  // まとめて非表示・ロック・選択される
chart.renameDrawingGroup(groupId, 'Old highs')
chart.getActiveIndicators()         // active indicator instances
chart.updateIndicator(instanceId, { period: 50 })  // re-tune params live
chart.removeIndicator(instanceId)
 
描画の設定とメニュー
 
描画をダブルクリックするか、オブジェクトツリーの歯車ボタンを使うと、その描画の設定が開きます。
  扱えるのはスタイル、ツール独自の設定（フィボナッチのレベル、延長、ラベルなど）、
  そしてチャートのタイムゾーンで表した各点です。描画を右クリックするとメニューが開き、
  設定、ラインへのアラート、順序、グループ化、ロック、非表示、複製、削除を選べます。
  サイドバーには消しゴム、ズームツール、そしてオフ・弱・強を切り替えられるマグネットもあります。
  土台となる API は 描画ツールを参照してください。
 
各インジケーター行の歯車ボタンで設定ダイアログが開きます。インジケーターの
  パラメーター（数値、切り替え、色）を自動で読み取り、変更を updateIndicator で
  即座に適用します。期間や色を変えるために、削除して追加し直す必要はありません。
 
オブジェクトツリーの比較セクションでは、他のシンボルを正規化したラインとして
  重ねて表示します。ライブアダプターがある場合、+ ボタンでシンボルの選択画面が開き、 adapter.fetchHistory でそのシンボルの履歴を取得して、パーセントモードで追加します
  （価格帯の異なるシンボルでも 1 本の軸を共有できます）。比較は時間足を変えると自動で再取得されます。
  プログラムでは次のようにします：
 
widget.addCompareSymbol('ETHUSDT')   // fetches + overlays (needs an adapter)

// or drive the chart directly with your own data
chart.addCompareSymbol('ETHUSDT', 'ETH', ethBars, '#627eea')
chart.setCompareMode('percent')      // 'percent' | 'absolute'
chart.removeCompareSymbol('ETHUSDT')
 
価格アラート
 
アラートは価格レベルだけでなく、ラインと別のラインを比較したり（価格が移動平均線をクロスする、MACD がシグナルをクロスする）、
  一定の本数（2〜500 本）以内に一定のパーセント動いたときに発動したり、確定したバーだけを見たり（戻ってくるヒゲでは発動しません）、
  有効期限を設けたりできます。ウィジェットのアラートパネルではこれらすべてを設定でき、コードからは addAlert の最後の引数で指定します。アラートは、setCurrentPrice からでも接続中のフィードからでも、
  価格が届くたびに、監視しているラインと合わせてチェックされます：
 
const ema = chart.addIndicator('ema', { period: 50 })
const rsi = chart.addIndicator('rsi')
chart.addAlert(NaN, 'crossingUp', 'above the 50 EMA', 'price', undefined, { target: `${ema}:value` })
chart.addAlert(NaN, 'movesUp', 'pump', 'price', undefined, { percent: 5, bars: 12 })
chart.addAlert(70, 'greaterThan', 'RSI closed above 70', `${rsi}:value`, 'RSI', { onBarClose: true })
chart.addAlert(64_000, 'crossing', 'today only', 'price', undefined, { expiresAt: Date.now() + 86_400_000 })

chart.on('alertExpired', (e) => e.payload)   // it reached its time without firing
chart.on('alertTriggered', (e) => e.payload)  // { id, condition, channel, target?, percent?, bars?, … }
 
ツールバーのベルでフローティングパネルが開き、価格アラートの追加、一覧、削除ができます。
  アラートが発動するとトースト通知が表示されます。アラートのラインはドラッグもでき、
  チャート上でつかんでスライドさせると価格を変更できます（移動したアラートは再び有効になります）。
  既定で有効で、alerts: false で無効にできます。プログラムからは Chart の API と型付きのアラートイベントで操作します：
 
// Add from code (condition: 'crossing' | 'crossingUp' | 'crossingDown'
//                          | 'greaterThan' | 'lessThan')
const id = chart.addAlert(64200, 'crossingUp', 'breakout')
chart.removeAlert(id)
chart.getAlerts()      // PriceAlert[]
chart.saveAlerts('tcw:alerts:BTCUSDT')   // localStorage persistence
chart.loadAlerts('tcw:alerts:BTCUSDT')

// React to triggers
chart.on('alertTriggered', (e) => {
  console.log('hit', e.payload.price, e.payload.message)
})
// also: 'alertAdd' / 'alertRemove' / 'alertUpdate' (fired on drag)

// Indicator alerts: bind to an indicator line via channel '<instanceId>:<key>'.
// In the widget, the alerts panel's source dropdown lists every active line.
const ema = chart.addIndicator('rsi')
chart.addAlert(70, 'crossingUp', 'RSI overbought', `${ema}:rsi`, 'RSI')
 
アラートの発動時に、音やデスクトップ通知を出すこともできます（どちらも既定ではオフ）。 sound: true で組み込みのビープ音が鳴り、URL を渡せば独自の音を使えます。 desktop: true は Notification API を使い、初回の使用時に許可を求めます。
 
new ChartWidget(host, {
  alertNotifications: { sound: true, desktop: true },
})
 
機能スイッチ
 
112 個のスイッチがあり、オフにするまではすべてオンです。ドットのない名前は機能まるごとで、現れるすべての場所でオフになり、ドットのある名前は一か所です。ウィジェットの動作中に切り替えられます。全一覧と対応する従来のオプションはカスタマイズにあります。
 
new ChartWidget(host, { features: { 'toolbar.replay': false, 'sidebar.patterns': false, hotkeys: false } })   // ボタン一つ、描画ツールのグループ一つ、すべてのキー操作

widget.setFeatures({ sidebar: false, statusBar: false })
widget.isFeatureOn('sidebar')    // false
widget.getFeatures()             // すべてのスイッチのオン・オフ
 
独自のボタンとメニュー項目
 
ツールバーにボタン（組み込みのアイコンや独自の要素、テキスト、スイッチ）を、チャートの右クリックメニューに
  項目を追加できます。どちらもウィジェット自身の項目の後ろに並びます。
 
const news = widget.addToolbarButton({
  id: 'news',
  label: 'News',
  icon: 'bell',            // または <svg> 要素、あるいは text: 'News'
  side: 'right',           // 'left' はチャートの操作ボタンと並ぶ
  toggle: true,
  onClick: () => news?.setActive(togglePanel()),
})
news?.setText('3')
news?.remove()

new ChartWidget(host, {
  chartMenuItems: ({ area, price, time }) => area === 'plot' && price !== undefined
    ? [{ label: `Copy ${price.toFixed(2)}`, icon: 'check', onSelect: () => copy(price) }]
    : [],
})
 
ほかにも、ツールバーのメニューボタン、描画サイドバーのボタン、ステータスバーの項目、各バーとチャート上の独自の場所、描画やインジケーターのメニュー末尾の項目があります（カスタマイズを参照）：
 
widget.addToolbarDropdown({ id: 'scans', label: 'Scans', icon: 'layers', items: () => [...] })   // 開くたびに取得
widget.addSidebarButton({ id: 'ruler', label: 'Ruler', icon: 'ruler', toggle: true, onClick })
widget.addStatusBarItem({ id: 'latency', text: '12 ms', label: 'Latency' })
widget.getSlot('chart')          // チャート上のレイヤー
widget.addHotkey({ keys: 'Alt+N', label: 'New note', onPress })   // 独自のショートカット。同じキーのウィジェットのショートカットを置き換えます

new ChartWidget(host, {
  drawingMenuItems: ({ id, type }) => [{ label: 'Share', onSelect: () => share(id) }],
  indicatorMenuItems: ({ instanceId, indicatorId }) => [{ label: 'Explain', onSelect: () => explain(indicatorId) }],
})
 
ChartWidgetGrid
 
複数のチャートウィジェットを並べて表示します。チャートごとにシンボル、時間足、インジケーター、描画を持てます。
  上部のバーで配置を選び、チャートを連動させ、グリッド全体を名前付きレイアウトとして保存できます。
  最後に押したチャートがアクティブなチャート（枠線付き）になります。
 
import { ChartWidgetGrid } from '@tradecanvas/chart/widget'

const grid = new ChartWidgetGrid(host, {
  layout: '2x2',                                   // '1x1' '1x2' '2x1' '2x2' '1x3' '3x1' '2x3' '3x2'
  widget: { timeframe: '1h' },                    // すべてのチャートに適用
  adapter: () => new BinanceAdapter(),            // チャートごとに 1 つ：アダプターは 1 本のストリームを保持する
  cells: [{ symbol: 'BTCUSDT' }, { symbol: 'ETHUSDT' }, { symbol: 'SOLUSDT' }, { symbol: 'BNBUSDT' }],
  sync: { crosshair: true, time: false, symbol: false, interval: false, drawings: false, replay: false },
})

grid.setLayout('1x2')
grid.setSync({ interval: true })   // ほかのチャートをアクティブなチャートにそろえる
grid.applyOverrides({ 'grid.vertical.visible': false })   // すべてのチャートの見た目と、あとから追加するチャートにも
grid.setFeatures({ 'toolbar.replay': false })               // すべてのチャートのスイッチと、あとから追加するチャートにも
grid.getActiveWidget().getChart()
grid.getLayoutSession()?.saveAs('Majors')

// チャートが作られるたびに（最初と、グリッドが増えたとき）
new ChartWidgetGrid(host, {
  onChartAdd: (widget, index) => widget.getChart().addIndicator('ema', { period: 21 }),
})
 
クロスヘアの同期では、ポインター位置の時刻がすべてのチャートに表示されます。時間軸の同期では、
  操作中のチャートに合わせてほかのチャートもスクロール・ズームします。描画は、同じシンボルを表示している
  チャートにコピーされます（オンにすると、それらのチャートの描画がまとめられ、失われるものはありません）。
  リプレイの同期では、リプレイ中のチャートと同じ時刻までほかのチャートもリプレイします（リプレイのステップより
  長いバーのチャートには、その時刻を含むバー全体が表示されます）。
  グリッドが減ったときに外れたチャートはしまわれて保存済みのレイアウトに残り、グリッドが再び増えたときに
  元の状態で戻ります。まったく新しいチャートは、シンボルと時間足が同期されていれば、
  アクティブなチャートのシンボルと時間足で開きます。
 
ChartGrid
 
ヘッドレスなチャート（ツールバーなし）を同期させたマルチチャートレイアウトです。完全な UI が必要な場合は ChartWidgetGrid を参照してください。
 
import { ChartGrid } from '@tradecanvas/chart'

const grid = new ChartGrid(host, { layout: '2x2', theme: 'dark' })
// チャートごとにアダプターを 1 つ：アダプターは 1 本のストリームを保持する
await grid.connectAll(() => new BinanceAdapter(), ['BTCUSDT','ETHUSDT','SOLUSDT','BNBUSDT'], '5m')
grid.setLayout('1x2')
 
レイアウト：'1x1'、'1x2'、'2x1'、'2x2'、'1x3'、'3x1'、'2x3'、'3x2'。 + p.toFixed(2))
chart.setPriceFormat(null)                                              // decimals again

chart.setTimeFormatter((time, { kind, timeZone }) =>
  // kind: 'year', 'month', 'day' (the step a label starts), 'time' (within a day), 'crosshair'
  new Intl.DateTimeFormat('en-GB', { timeZone: timeZone ?? undefined, hour: '2-digit', minute: '2-digit' }).format(time))

軸がラベルを選ぶ仕組み

時間軸は最も大きな暦の区切りを始めるバーにラベルを付けます：年（太字）、月、日、きりのよい時刻で、互いに少なくとも 80 px 離れます。そのため 5Y では 2022 · Jul · 2023、1 か月では Oct · 8 · 15、1 日の中では 12:00 · 18:00 と読めます。ラベルは画面ではなくバーに属します：パンするとバーと一緒に動き、前に履歴を読み込んでも位置は変わりません。最も古いバーの左にはありません。月名は setNumberLocale に従い、グリッド線はラベルの位置に引かれます。

価格軸は高さに収まるだけのラベルを、少なくとも 30 px 離して、市場の呼値の単位に置きます。対数軸では刻みが価格とともに大きくなるので、上と同じように下にもラベルが付きます。パーセントや指数の軸では、基準からのきりのよいパーセントや指数ポイントになります。インジケーターのペインも自分の高さでラベル数を決めます。

マーケット：呼値の単位、値幅制限、取引セッション

setMarket はチャートに取引所のルールを与えます。ローソク足の色、小数点以下の桁数、呼値の単位 （価格によって変わることもあります）、当日の上限価格と下限価格、売買単位です。 roundPrice と getPriceStep は価格が属する価格帯の呼値の単位に従うので、チャートの メニューから選んだ価格は常に有効な価格になり、ウィジェットの注文チケットは呼値の単位、当日の値幅、売買単位で注文を チェックします。プリセットには取引所の取引セッションとタイムゾーンも含まれ、getCurrentSession や独自のコードで使えます。チャートのセッションの塗りつぶしや時間外取引は setSymbolInfo から設定します。プリセットは 2025 年 5 月時点のベトナムの取引所に対応しています。HOSE（価格に応じて 10、50、 100 ドン刻み、±7%）、その ETF とカバードワラント（10 ドン）、HNX（±10%、引け後のセッションあり）、UPCoM （±15%）、VN30 指数先物（0.1 ポイント刻み、±7%、8:45 開始）です。株式の売買単位は 100 株で、上昇は緑、 下落は赤、上限価格は紫、下限価格はシアン、基準価格は黄色です。価格は株価ボードと同じく 1,000 ドン単位で、 scaleMarketPrices(preset, 1000) を使うとドン単位の価格を扱えます。

import {
  MARKET_HOSE, scaleMarketPrices, priceStepAt, roundToPriceStep, getCurrentSession,
  vn30fContracts, vn30fLastTradingDay,
} from '@tradecanvas/chart'

chart.setMarket(MARKET_HOSE)                 // 25350 のような価格には scaleMarketPrices(MARKET_HOSE, 1000)
chart.setPriceLimits(25.35)                  // 基準価格：前日の終値
chart.getPriceLimits()                       // { ceiling: 27.1, floor: 23.6, reference: 25.35 }
chart.roundPrice(25.37)                      // 25.35（50 ドン刻み）
chart.getPriceStep(9.5)                      // 10,000 ドン未満は 0.01

// ルールを単体で使う
priceStepAt(25.35, MARKET_HOSE)              // 0.05
roundToPriceStep(10.486, MARKET_HOSE, 'down') // 10.45
getCurrentSession(MARKET_HOSE.sessions, Date.now(), MARKET_HOSE.timeZone) // { name: 'ATC', type: 'preClose', … }、時刻だけで判定

// VN30 先物：上場中の 4 限月とその最終取引日
vn30fContracts(Date.now())                   // [{ symbol: 'VN30F2611', lastTradingDay: '2026-11-19', … }, …]
vn30fLastTradingDay(2026, 12, (day) => holidays.has(day)) // 第 3 木曜日。祝日なら前倒し

独自のマーケットは MarketConfig です。priceStep（価格帯ごとなら priceSteps: [{ from, step }]）、priceLimits、 volumeUnit（売買単位）、sessions、timeZone、 colorScheme を指定します。シンボル自身の minTick はマーケットの呼値の単位より優先されます。 取引所のルールは随時変わるため、プリセットに頼る前に、その取引所の現行ルールと照らし合わせてください。

シンボルの比較

別のシンボルの変化率を価格スケール上に表示する（addCompareSymbol）ほか、その価格を専用の スケールや専用のペインに表示したり、チャートの終値とのスプレッドや比率を表示したりできます。後者は インジケーター（compareSymbol、spread）なので、ほかのインジケーターと同じく 凡例、値ラベル、アラートを持ち、レイアウトにも保存されます。もう一方のシンボルのバーは時刻でチャートのバーに 揃えられます。チャートは必要なバーを要求するので、時間足を変えたら改めて渡してください。correlation（終値）と correlationlog（バーごとのリターン）も同じようにもう一方のシンボルを読み、−1 から 1 の値を取ります。

chart.addCompareSymbol('eth', 'ETHUSDT', ethBars, '#7c4dff')   // percent change, on this scale
chart.addIndicator('compareSymbol', { symbol: 'ETHUSDT' }, 'bottom', { scale: 'left' })  // own scale
chart.addIndicator('spread', { symbol: 'ETHUSDT', mode: 'ratio' })                      // own pane
chart.addIndicator('correlation', { symbol: 'ETHUSDT', length: 20 })                    // −1 to 1, own pane

chart.on('symbolSeriesRequest', async ({ payload }) =>
  chart.setSymbolSeries(payload.symbol, await adapter.fetchHistory(payload.symbol, '1h', 1000)))
chart.getRequiredSymbols()                           // what to fetch again on a new interval
chart.setPaneScale(spreadId, { percent: true })     // a pane in percent of its first value

ChartWidget では、オブジェクトツリーの比較ボタンでまずシンボルを、次に表示方法（変化率、専用スケール、 専用サブチャート、スプレッド、比率、価格またはリターンの相関）を選びます。

データのエクスポート

バーを CSV または JSON で書き出します。インジケーターのラインはそれぞれ独立した列になり、列名は凡例での 名前と同じです。ChartWidget では、チャートの右クリックメニューにデータをエクスポート (CSV)があります。

chart.exportAllData('csv', 'btc-1h.csv')                 // every bar loaded
chart.exportVisibleData('json', undefined, { indicators: false })
const text = chart.getExportText('csv', { range: 'visible' })
const { bars, columns } = chart.getExportData()          // columns: { name, values }[]

価格帯別出来高

表示範囲の出来高を価格帯ごとに集計した横向きのヒストグラムです。既定ではオフで、 プログラムから、またはウィジェットの設定シートで切り替えます：

chart.setVolumeProfileVisible(true)
chart.setVolumeProfileConfig({
  buckets: 48,        // resolution of the histogram
  widthRatio: 0.18,   // % of chart width
  opacity: 0.32,
  highlightPoC: true, // mark the highest-volume bucket
})

スイングマーカー（ピボット）

フラクタルなスイング高値・安値を小さな三角形で示します（確定したピボット高値の上に ▼、 ピボット安値の下に ▲）。強さの値で、左右それぞれ何本のバーがより低くなければならないかを 指定します。設定シートから切り替えるか、次のようにします：

chart.setPivotMarkersVisible(true)
chart.setPivotMarkersConfig({ left: 5, right: 5, showLabels: true })

// market-structure labels (HH / HL / LH / LL) instead of price
chart.setPivotMarkersConfig({ structureLabels: true })

// pure detection + classification are exported
import { findPivots, classifyPivots } from '@tradecanvas/core'
const pivots = findPivots(bars, 5, 5)        // [{ index, price, type }]
const structure = classifyPivots(pivots)     // adds label: 'HH'|'LH'|'HL'|'LL'

セッションの塗りつぶし（通常取引時間）

通常セッション外のバー（プレマーケット / ポストマーケットや夜間の休止時間）を暗くして、 レギュラーセッションを際立たせます。既定は米国株式の RTH（ニューヨーク時間 09:30–16:00、 夏時間を考慮）です。時間帯は 1 日の中の分数と、市場のタイムゾーンで設定します。 フィードがセッション情報を提供するシンボルでは、自動的に設定されます。

chart.setSessionShadingVisible(true)
chart.setSessionShadingConfig({
  startMinute: 9 * 60 + 30,     // 09:30
  endMinute: 16 * 60,           // 16:00 (end-exclusive; end < start wraps midnight)
  timeZone: 'America/New_York', // or tzOffsetMinutes: -300 for a fixed offset
})

時間外取引。オフにすると、シンボルの通常取引時間（その timezone での SymbolInfo.sessions）の外にあるバーがチャートから外れます。外れたバーはライブのバーや履歴のページも 含めて取り置かれ、オンに戻すと再び表示されます。日足以上のバーはそのままです。

chart.setSymbolInfo({ symbol: 'AAPL', timezone: 'America/New_York', sessions: [{ start: '09:30', end: '16:00' }] })
chart.setExtendedHours(false)     // or new Chart(host, { extendedHours: false })
chart.isExtendedHoursVisible()

前期間のレベル (PDH / PDL / PDC)

前日（または前週）の高値・安値・終値と、当期間の始値を、ラベル付きの水平線で表示します。 デイトレーダーが注目するサポート / レジスタンスの水準です。設定シートから切り替えるか、 直接指定します：

chart.setPeriodLevelsVisible(true)
chart.setPeriodLevelsPeriod('week')   // 'day' (PDH/PDL/PDC) | 'week' (PWH/PWL/PWC)

// pure computation is exported
import { computePeriodLevels } from '@tradecanvas/core'
const levels = computePeriodLevels(bars, 'day')  // [{ id, label, price }]

マーケットプロファイル (TPO)

価格ごとの滞在時間を示すヒストグラムです。各バーは、その値幅が触れたすべての価格帯に TPO を 1 つずつ加え、POC（Point of Control、最も活発な価格）とバリューエリア （TPO の約 70%）を浮かび上がらせます。出来高ではなく時間で重み付けする点で価格帯別出来高とは 異なり、左端に固定されるため両方を同時に表示できます。既定ではオフで、設定シートから、 または直接切り替えます：

chart.setMarketProfileVisible(true)
chart.setMarketProfileConfig({
  buckets: 48,
  widthRatio: 0.18,
  opacity: 0.32,
  valueAreaPct: 0.7,  // fraction of TPOs in the value area
  highlightPoC: true, // dashed line at the point of control
})

// split into one mini-profile per calendar-day session
chart.setMarketProfileConfig({ splitBySession: true })

// classic TPO letters per session (when zoomed in enough to be legible)
chart.setMarketProfileConfig({ splitBySession: true, letters: true })

// pure computation is exported too
import { computeMarketProfile, computeSessionProfiles } from '@tradecanvas/core'
const profile = computeMarketProfile(bars, priceMin, priceMax, { buckets: 48 })
const sessions = computeSessionProfiles(bars, priceMin, priceMax)  // per-day TPO

タッチとモバイル

ジェスチャー	操作
1 本指でドラッグ（チャート領域）	スクロール + クロスヘアを移動
2 本指でピンチ	中心点を基準に拡大縮小
長押し（約 500 ms）	バーに OHLC ツールチップを固定（Alt+クリックのモバイル版）
価格軸 / 時間軸の帯の中を 1 本指でドラッグ	対応する軸を拡大縮小
タップ	クリック：click、barClick、シグナルマーカー。描画の上なら選択
ダブルタップ	ダブルクリック：軸の上ならリセット、描画の上なら設定を開く
描画の上を 1 本指でドラッグ	移動。選択中の描画はハンドルで形を変更
描画ツール選択中：タップ、タップ — または押して、ドラッグして、離す	点を置く。押してドラッグして離すと 2 点の線を一度に描画
描画の上で長押し	そのメニュー（右クリックと同じ）
アラート・注文・ブラケットの線やペインの境界を 1 本指でドラッグ	それをドラッグ

指はマウスより遠くまで届きます：線まで約 16 px、ハンドルまで約 22 px（マウスは 8 px）。スクロールするページでは、pageScroll: true で縦のスワイプと通常のマウスホイールをページに任せます。チャートは横スワイプでスクロールし、2 本指または Ctrl + ホイール（トラックパッドのピンチ）でズームします。描画・線・軸への操作はチャートのままです。chart.setPageScroll(on) で実行中に切り替えられます。

画面幅が 640 px 未満では、モーダル（設定、ショートカット一覧、コマンドパレット、シンボル検索）が 自動的にボトムシート形式に切り替わり、つまみ（グラブハンドル）とセーフエリアを考慮した余白が付きます。

計測ツール

Shift を押しながらチャート上をドラッグすると、2 点間のバー数 × 価格差を計測できます。 オーバーレイには価格の Δ（絶対値と %）、バー数、時間幅が表示されます。マウスを離すとすぐに消え、 保存される状態には含まれません。

イベント

すべてのイベントは ChartEventMap で型付けされています：

chart.on('orderPlace', e => /* OrderPlacePayload */)
chart.on('orderModify', e => /* OrderModifyPayload */)
chart.on('signalMarkerAdd', e => /* { marker } */)
chart.on('tradeZoneAdd', e => /* { zone } */)
chart.on('dataUpdate', e => /* { length } */)
chart.on('ordersChange', e => /* { orders } */)
chart.on('positionsChange', e => /* { positions } */)
chart.on('executionFill', e => /* { side, price, quantity, reason, pnl } */)
chart.on('chartContextMenu', e => /* { area, x, y, price, time } */)
chart.on('stateChange', () => /* 描画、インジケーター、アラート、チャートタイプ、テーマのいずれかが変わった可能性がある */)
chart.on('paneChange', e => /* { instanceId, change: 'collapsed' | 'maximized' | 'order' } */)
chart.on('chartTypeChange', e => /* { type, previous } */)
chart.on('symbolChange', e => /* { symbol, previous } */)
chart.on('timeframeChange', e => /* { timeframe, previous } */)
chart.on('historyChange', e => /* { canUndo, canRedo } */)
chart.on('drawingSelect', e => /* { ids, primary } */)
chart.on('rendererChange', e => /* { renderer: 'canvas' | 'webgl', reason?: 'unsupported' | 'contextLost' | 'contextRestored' | 'limit' } */)

独自の変更を元に戻す

recordUndo は、あなたの変更を描画やインジケーターと同じチャートの取り消し履歴に加えます。Ctrl/Cmd+Z で undo が、やり直しで redo が呼ばれます。同じ subject に対して続けて行った変更は 1 ステップにまとまります。ChartWidget も設定とチャートタイプをこの方法で記録しています。

const before = panel.color
panel.color = 'red'
chart.recordUndo({ subject: 'panel-color', undo: () => (panel.color = before), redo: () => (panel.color = 'red') })

キーボードとスクリーンリーダー

フォーカスのあるチャートは、矢印キーでスクロール（Shift で 10 本ずつ）、↑/↓ または +/− でズームし、Home と End で 先頭と末尾へ移動します。スクリーンリーダーに対しては、概要（シンボル、タイプ、時間足、現在値）を持つアプリケーションです。 キーで表示を動かすと画面に映っている内容を伝え、カンマとピリオドでバーを 1 本ずつ読み上げます。a11y.labels でこれらを自分の言語にでき、a11y: false で無効にできます。scrollBars(n) と selectDrawing(id) は、キー操作やクリックと同じことをコードから行います。

new Chart(host, { a11y: { labels: { role: 'gráfico', summary: '{what}. Último precio {close}.' } } })

ポインターの位置から得た価格は、chart.roundPrice(price) で市場の価格刻みに合わせられます。 シンボルの minTick の倍数に、それがなければシンボルの精度に丸めます。ChartWidget のメニュー、注文チケット、描画設定の Coordinates タブはこれを使っています。 chart.getPriceStep() はその刻みそのものを返します。

ChartWidget

Chart を完全な UI で包みます。同じインスタンスに widget.chart でアクセスできます。

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

const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(),
  historyLimit: 500,
  trading: true,
  features: { 'toolbar.replay': false },   // ウィジェットのスイッチ：「カスタマイズ」を参照
  onReady: (chart) => { /* ... */ },
})

widget.chart.setData(...)
widget.destroy()

ウィジェットのキーボードショートカット

ショートカット	操作
Ctrl / ⌘ + K	コマンドパレット（インジケーター、チャートタイプ、描画など）
Ctrl / ⌘ + P	シンボル検索 — 設定したシンボル一覧からのあいまい検索
Ctrl / ⌘ + S	レイアウトを保存（初回は名前を尋ねます）
0–9	時間足（5、15m、1h、1D）を入力して Enter で切り替え（intervalTyping: false で無効）
Alt + T / H / J / V / C / F	トレンドライン、水平線、水平半直線、垂直線、十字線、フィボナッチ・リトレースメント
?	キーボードショートカットの一覧を表示
Alt + チャートをクリック	カーソル位置のバーに OHLC ツールチップを固定（ライブのクロスヘアとの差分を表示）
Esc	ツールチップの固定を解除 / 描画をキャンセル
ツールバーのシンボルをクリック	シンボル検索のモーダルを開きます
ツールバーの再生ボタンをクリック	バーリプレイのスクラバーを開きます（再生 / ステップ / シーク / 速度）

検索対象の一覧は、実行時に widget.setSymbols(['BTCUSDT', 'ETHUSDT', …]) で更新できます。

データウィンドウ

カーソル位置のバーの正確な O/H/L/C/V、バーの変化、すべての有効なインジケーターの値を表示する フローティングパネルです。クロスヘアを動かすとリアルタイムに更新されます。コマンドパレット （Ctrl/⌘ K →「データウィンドウの表示切り替え」）から表示を切り替えます。

共有できる表示（ディープリンク）

シンボル、時間足、チャートタイプ、価格スケール、インジケーター（パラメーター込み）、描画を含む 表示全体を、ディープリンク用のコンパクトで URL セーフな文字列にエンコードします。 shareUrl: true を指定すると、ウィジェットは読み込み時に #tcw=… ハッシュから表示を復元し、コマンドパレットの「表示を共有」アクションでリンクをクリップボードにコピーできます。

const widget = new ChartWidget(host, { shareUrl: true })

const token = widget.exportState()      // portable string
await widget.importState(token)         // restore a view
await widget.copyShareLink()            // copy "<url>#tcw=<token>"

名前付きレイアウト

ツールバーのレイアウトボタンで、チャートに名前を付けて保存できます。保存されるのはシンボル、時間足、 価格スケール、チャートタイプ、インジケーター、描画、アラートです（テーマは閲覧者ごとのものなので含みません）。 レイアウトを開く、名前を変更する、削除するといった操作は、このボタンのメニューから行います。 開いているレイアウトは変更のたびに自動保存され、Ctrl/⌘ S でも保存できます。 storage を渡さない限り、レイアウトはこのブラウザーの localStorage に保存されます。 storage は 4 つのメソッドからなり、どれも Promise を返してかまいません。

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

const server: LayoutStorage = {
  list: () => api.get('/layouts'),              // [{ id, name, symbol, timeframe, updatedAt }]
  load: (id) => api.get(`/layouts/${id}`),     // { ...summary, content } または null
  save: (layout) => api.put(`/layouts/${layout.id}`, layout),
  remove: (id) => api.delete(`/layouts/${id}`),
}

const widget = new ChartWidget(host, {
  layouts: { storage: server, autoSave: true, openLast: true },  // 使わない場合は false
})

const layouts = widget.getLayoutSession()!
await layouts.saveAs('Swing BTC')
await layouts.open(id)
layouts.current()          // { id, name, … } または null
layouts.setAutoSave(false)

// 内容だけを取り出して、好きな場所に保存する
const json = widget.getLayoutContent()
await widget.applyLayoutContent(json)

同梱のストレージは localStorageLayouts(prefix) と memoryLayouts() の 2 つです。 保存された内容は慎重に読み込まれ、解析できないレイアウトは中途半端に適用されず、拒否されます。 各レイアウトは自分の kind（'chart' または 'grid'）を記録するため、 ウィジェットとグリッドで 1 つのストレージを共有しても、それぞれ自分のレイアウトだけを一覧に表示します。 保存、開く、自動保存は 1 つずつ順に実行されるため、保存がその後に開いたレイアウトに書き込まれることはありません。

シンボルごとのレイアウト

これとは別に、シンボルごとのインジケーター構成、描画、アラート、チャートタイプを localStorage に自動で保存できます：

new ChartWidget(host, {
  symbol: 'BTCUSDT',
  symbols: ['BTCUSDT', 'ETHUSDT', 'SOLUSDT'],
  adapter: new BinanceAdapter(),
  persistLayouts: true,  // or { keyPrefix: 'myapp:', debounceMs: 2000 }
})

// Reset a single symbol's layout
widget.clearSavedLayout('BTCUSDT')

レイアウトはシンボルの切り替え時とウィジェットの破棄時に書き出されるため、 ユーザーがページを離れても何も失われません。

ドラッグ＆ドロップでのデータ読み込み

CSV または JSON ファイルをチャートにドロップすると、すぐに読み込まれます。既定で有効で、 dragDropImport: false で無効にできます。パーサーは一般的な列構成 （time, open, high, low, close, volume）、ISO 8601 形式のタイムスタンプ、 UNIX 時間の秒 / ミリ秒に対応しています。

// Programmatic use
import { parseOHLCV } from '@tradecanvas/chart'

const { data, rowCount, skipped } = parseOHLCV(csvText)
chart.setData(data)

時間足のリサンプリング

最も細かい解像度の系列を widget.setData() で渡すと、ツールバーの時間足ボタンが クライアント側で集計します。1 つのデータセットですべての解像度をまかなうため、再取得は不要です。 ライブアダプターが接続されていないときに有効で、resampleTimeframes: false で 無効にできます。週足の区切りは既定で月曜日起点です（日曜日にするには weekStartsOn: 0）。

const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  timeframe: '1h',
  timeframes: ['5m', '15m', '1h', '4h', '1d', '1w'],
})
widget.setData(oneMinuteBars)   // base series; clicking 4h/1d/1w resamples it

// Or use the pure function directly
import { resampleOHLCV, inferTimeframeMs } from '@tradecanvas/chart'

const hourly = resampleOHLCV(oneMinuteBars, '1h')   // OHLC merged, volume summed
const fourHour = resampleOHLCV(oneMinuteBars, '4h', { weekStartsOn: 1 })

区切りはカレンダーを考慮します。日中足と日足は UTC エポックの境界に、週足は設定した週の開始日に、 月足 / 四半期足 / 年足はカレンダーの境界にそろえます。入力のバーが変更されることはありません。

ウォッチリスト

シンボルのリストを並べた右側のパネルで、各行に最新価格、変化率（%）、スパークラインを表示します。リストの切り替え、 作成、名前の変更、削除はパネルのメニューから行います。シンボルはシンボル検索（+）から追加し、削除でき、ドラッグか Alt+↑/↓ で並べ替えられます。各行のクオートは、アダプターの subscribeQuotes、独自のクオートソース、 または自分で送った値から取ります。

const widget = new ChartWidget(host, {
  symbol: 'BTCUSDT',
  adapter: new BinanceAdapter(),               // its quotes fill the rows
  watchlist: {
    lists: [
      { id: 'majors', name: 'Majors', symbols: ['BTCUSDT', 'ETHUSDT'] },
      { id: 'alts', name: 'Alts', symbols: ['SOLUSDT', 'ADAUSDT'] },
    ],
    persist: true,                             // kept in this browser
    onChange: (lists, active) => save(lists),  // or keep them yourself
  },
})

widget.addToWatchlist('BNBUSDT', 'alts')
widget.setActiveWatchlist('alts')
widget.setQuotes([{ symbol: 'AAPL', last: 190.2, prevClose: 188.1 }])   // from your own feed
widget.getQuote('AAPL')

watchlist: true はこれまでどおり symbols の 1 つのリストを表示します。setWatchlistEntry でも引き続き行の価格、変化、スパークラインを送れます。

シンボル情報

ツールバーの ⓘ ボタン（またはコマンドパレット）から開くパネルです。シンボルの名称、最新価格と変化、次の取引開始または 終了までのカウントダウン付きの市場の状態、当日の始値、値幅、出来高、前日終値、買気配と売気配、呼値の単位、通貨、 タイムゾーンと取引時間、ニュースを表示します。市場が閉まっているときはステータスバーにも表示されます。

new ChartWidget(host, {
  symbol: 'AAPL',
  news: (symbol, limit) => api.headlines(symbol, limit),   // or the adapter's fetchNews
})
widget.toggleSymbolInfo(true)

ナビゲーション、元に戻す、表示方向

チャート上のボタン — 縮小と拡大、過去と未来へのスクロール（押し続けると動き続けます）、リセット — は、マウスが チャート上にあるときに表示されます（navigation: false で非表示）。設定の変更とチャートタイプの変更は、 描画やインジケーターと同じく Ctrl/Cmd+Z で元に戻せます。アラビア語、ヘブライ語、ペルシア語、ウルドゥー語では ウィジェットが左右反転します（dir: 'auto'、または 'rtl' / 'ltr'）。 チャートの時間は左から右へ進んだままです。

お気に入りの描画ツール

よく使う描画ツールを、サイドバー上部の帯に固定できます。ツール（グループのフライアウト内でも、 帯の中でも）を右クリックすると固定 / 固定解除でき、その設定は localStorage に保存されます。 最初に固定するツールは drawingFavorites で指定します：

new ChartWidget(host, {
  drawingFavorites: ['trendLine', 'horizontalLine', 'fibRetracement', 'rectangle'],
})

描画スタイルとテンプレート

描画サイドバーのパレットボタンで、スタイルのポップオーバーが開きます。次に描く描画（と選択中の描画）の 色、線の太さ、線のスタイルを選び、名前付きのテンプレートとして localStorage に 保存すれば、ワンクリックで再利用できます。プログラムでは次のようにします：

chart.setDrawingStyle({ color: '#e8505b', lineWidth: 2, lineStyle: 'dashed' })
chart.getDrawingStyle()
chart.setSelectedDrawingStyle({ color: '#1fa874' })  // restyle the selected drawing

オブジェクトツリー

ツールバーのレイヤーボタンで、有効なインジケーターと描画をすべて一覧するオブジェクトツリーの パネルが開きます。インジケーターは削除でき、描画は項目ごとに表示 / 非表示、ロック / ロック解除、 設定、削除ができ、グループはその下に所属する描画とともに一覧表示されます。 既定で有効で、objectTree: false で無効にできます。 描画の操作は次のメソッドに対応します：

chart.getDrawings()                 // DrawingState[] (id, type, visible, locked)
chart.setDrawingVisible(id, false)  // hide a single drawing
chart.setDrawingLocked(id, true)    // lock it from edits
chart.removeDrawing(id)
chart.groupDrawings(ids, 'Weekly levels')  // まとめて非表示・ロック・選択される
chart.renameDrawingGroup(groupId, 'Old highs')
chart.getActiveIndicators()         // active indicator instances
chart.updateIndicator(instanceId, { period: 50 })  // re-tune params live
chart.removeIndicator(instanceId)

描画の設定とメニュー

描画をダブルクリックするか、オブジェクトツリーの歯車ボタンを使うと、その描画の設定が開きます。 扱えるのはスタイル、ツール独自の設定（フィボナッチのレベル、延長、ラベルなど）、 そしてチャートのタイムゾーンで表した各点です。描画を右クリックするとメニューが開き、 設定、ラインへのアラート、順序、グループ化、ロック、非表示、複製、削除を選べます。 サイドバーには消しゴム、ズームツール、そしてオフ・弱・強を切り替えられるマグネットもあります。 土台となる API は 描画ツールを参照してください。

各インジケーター行の歯車ボタンで設定ダイアログが開きます。インジケーターの パラメーター（数値、切り替え、色）を自動で読み取り、変更を updateIndicator で 即座に適用します。期間や色を変えるために、削除して追加し直す必要はありません。

オブジェクトツリーの比較セクションでは、他のシンボルを正規化したラインとして 重ねて表示します。ライブアダプターがある場合、+ ボタンでシンボルの選択画面が開き、 adapter.fetchHistory でそのシンボルの履歴を取得して、パーセントモードで追加します （価格帯の異なるシンボルでも 1 本の軸を共有できます）。比較は時間足を変えると自動で再取得されます。 プログラムでは次のようにします：

widget.addCompareSymbol('ETHUSDT')   // fetches + overlays (needs an adapter)

// or drive the chart directly with your own data
chart.addCompareSymbol('ETHUSDT', 'ETH', ethBars, '#627eea')
chart.setCompareMode('percent')      // 'percent' | 'absolute'
chart.removeCompareSymbol('ETHUSDT')

価格アラート

アラートは価格レベルだけでなく、ラインと別のラインを比較したり（価格が移動平均線をクロスする、MACD がシグナルをクロスする）、 一定の本数（2〜500 本）以内に一定のパーセント動いたときに発動したり、確定したバーだけを見たり（戻ってくるヒゲでは発動しません）、 有効期限を設けたりできます。ウィジェットのアラートパネルではこれらすべてを設定でき、コードからは addAlert の最後の引数で指定します。アラートは、setCurrentPrice からでも接続中のフィードからでも、 価格が届くたびに、監視しているラインと合わせてチェックされます：

const ema = chart.addIndicator('ema', { period: 50 })
const rsi = chart.addIndicator('rsi')
chart.addAlert(NaN, 'crossingUp', 'above the 50 EMA', 'price', undefined, { target: `${ema}:value` })
chart.addAlert(NaN, 'movesUp', 'pump', 'price', undefined, { percent: 5, bars: 12 })
chart.addAlert(70, 'greaterThan', 'RSI closed above 70', `${rsi}:value`, 'RSI', { onBarClose: true })
chart.addAlert(64_000, 'crossing', 'today only', 'price', undefined, { expiresAt: Date.now() + 86_400_000 })

chart.on('alertExpired', (e) => e.payload)   // it reached its time without firing
chart.on('alertTriggered', (e) => e.payload)  // { id, condition, channel, target?, percent?, bars?, … }

ツールバーのベルでフローティングパネルが開き、価格アラートの追加、一覧、削除ができます。 アラートが発動するとトースト通知が表示されます。アラートのラインはドラッグもでき、 チャート上でつかんでスライドさせると価格を変更できます（移動したアラートは再び有効になります）。 既定で有効で、alerts: false で無効にできます。プログラムからは Chart の API と型付きのアラートイベントで操作します：

// Add from code (condition: 'crossing' | 'crossingUp' | 'crossingDown'
//                          | 'greaterThan' | 'lessThan')
const id = chart.addAlert(64200, 'crossingUp', 'breakout')
chart.removeAlert(id)
chart.getAlerts()      // PriceAlert[]
chart.saveAlerts('tcw:alerts:BTCUSDT')   // localStorage persistence
chart.loadAlerts('tcw:alerts:BTCUSDT')

// React to triggers
chart.on('alertTriggered', (e) => {
  console.log('hit', e.payload.price, e.payload.message)
})
// also: 'alertAdd' / 'alertRemove' / 'alertUpdate' (fired on drag)

// Indicator alerts: bind to an indicator line via channel '<instanceId>:<key>'.
// In the widget, the alerts panel's source dropdown lists every active line.
const ema = chart.addIndicator('rsi')
chart.addAlert(70, 'crossingUp', 'RSI overbought', `${ema}:rsi`, 'RSI')

アラートの発動時に、音やデスクトップ通知を出すこともできます（どちらも既定ではオフ）。 sound: true で組み込みのビープ音が鳴り、URL を渡せば独自の音を使えます。 desktop: true は Notification API を使い、初回の使用時に許可を求めます。

new ChartWidget(host, {
  alertNotifications: { sound: true, desktop: true },
})

機能スイッチ

112 個のスイッチがあり、オフにするまではすべてオンです。ドットのない名前は機能まるごとで、現れるすべての場所でオフになり、ドットのある名前は一か所です。ウィジェットの動作中に切り替えられます。全一覧と対応する従来のオプションはカスタマイズにあります。

new ChartWidget(host, { features: { 'toolbar.replay': false, 'sidebar.patterns': false, hotkeys: false } })   // ボタン一つ、描画ツールのグループ一つ、すべてのキー操作

widget.setFeatures({ sidebar: false, statusBar: false })
widget.isFeatureOn('sidebar')    // false
widget.getFeatures()             // すべてのスイッチのオン・オフ

独自のボタンとメニュー項目

ツールバーにボタン（組み込みのアイコンや独自の要素、テキスト、スイッチ）を、チャートの右クリックメニューに 項目を追加できます。どちらもウィジェット自身の項目の後ろに並びます。

const news = widget.addToolbarButton({
  id: 'news',
  label: 'News',
  icon: 'bell',            // または <svg> 要素、あるいは text: 'News'
  side: 'right',           // 'left' はチャートの操作ボタンと並ぶ
  toggle: true,
  onClick: () => news?.setActive(togglePanel()),
})
news?.setText('3')
news?.remove()

new ChartWidget(host, {
  chartMenuItems: ({ area, price, time }) => area === 'plot' && price !== undefined
    ? [{ label: `Copy ${price.toFixed(2)}`, icon: 'check', onSelect: () => copy(price) }]
    : [],
})

ほかにも、ツールバーのメニューボタン、描画サイドバーのボタン、ステータスバーの項目、各バーとチャート上の独自の場所、描画やインジケーターのメニュー末尾の項目があります（カスタマイズを参照）：

widget.addToolbarDropdown({ id: 'scans', label: 'Scans', icon: 'layers', items: () => [...] })   // 開くたびに取得
widget.addSidebarButton({ id: 'ruler', label: 'Ruler', icon: 'ruler', toggle: true, onClick })
widget.addStatusBarItem({ id: 'latency', text: '12 ms', label: 'Latency' })
widget.getSlot('chart')          // チャート上のレイヤー
widget.addHotkey({ keys: 'Alt+N', label: 'New note', onPress })   // 独自のショートカット。同じキーのウィジェットのショートカットを置き換えます

new ChartWidget(host, {
  drawingMenuItems: ({ id, type }) => [{ label: 'Share', onSelect: () => share(id) }],
  indicatorMenuItems: ({ instanceId, indicatorId }) => [{ label: 'Explain', onSelect: () => explain(indicatorId) }],
})

ChartWidgetGrid

複数のチャートウィジェットを並べて表示します。チャートごとにシンボル、時間足、インジケーター、描画を持てます。 上部のバーで配置を選び、チャートを連動させ、グリッド全体を名前付きレイアウトとして保存できます。 最後に押したチャートがアクティブなチャート（枠線付き）になります。

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

const grid = new ChartWidgetGrid(host, {
  layout: '2x2',                                   // '1x1' '1x2' '2x1' '2x2' '1x3' '3x1' '2x3' '3x2'
  widget: { timeframe: '1h' },                    // すべてのチャートに適用
  adapter: () => new BinanceAdapter(),            // チャートごとに 1 つ：アダプターは 1 本のストリームを保持する
  cells: [{ symbol: 'BTCUSDT' }, { symbol: 'ETHUSDT' }, { symbol: 'SOLUSDT' }, { symbol: 'BNBUSDT' }],
  sync: { crosshair: true, time: false, symbol: false, interval: false, drawings: false, replay: false },
})

grid.setLayout('1x2')
grid.setSync({ interval: true })   // ほかのチャートをアクティブなチャートにそろえる
grid.applyOverrides({ 'grid.vertical.visible': false })   // すべてのチャートの見た目と、あとから追加するチャートにも
grid.setFeatures({ 'toolbar.replay': false })               // すべてのチャートのスイッチと、あとから追加するチャートにも
grid.getActiveWidget().getChart()
grid.getLayoutSession()?.saveAs('Majors')

// チャートが作られるたびに（最初と、グリッドが増えたとき）
new ChartWidgetGrid(host, {
  onChartAdd: (widget, index) => widget.getChart().addIndicator('ema', { period: 21 }),
})

クロスヘアの同期では、ポインター位置の時刻がすべてのチャートに表示されます。時間軸の同期では、 操作中のチャートに合わせてほかのチャートもスクロール・ズームします。描画は、同じシンボルを表示している チャートにコピーされます（オンにすると、それらのチャートの描画がまとめられ、失われるものはありません）。 リプレイの同期では、リプレイ中のチャートと同じ時刻までほかのチャートもリプレイします（リプレイのステップより 長いバーのチャートには、その時刻を含むバー全体が表示されます）。 グリッドが減ったときに外れたチャートはしまわれて保存済みのレイアウトに残り、グリッドが再び増えたときに 元の状態で戻ります。まったく新しいチャートは、シンボルと時間足が同期されていれば、 アクティブなチャートのシンボルと時間足で開きます。

ChartGrid

ヘッドレスなチャート（ツールバーなし）を同期させたマルチチャートレイアウトです。完全な UI が必要な場合は ChartWidgetGrid を参照してください。

import { ChartGrid } from '@tradecanvas/chart'

const grid = new ChartGrid(host, { layout: '2x2', theme: 'dark' })
// チャートごとにアダプターを 1 つ：アダプターは 1 本のストリームを保持する
await grid.connectAll(() => new BinanceAdapter(), ['BTCUSDT','ETHUSDT','SOLUSDT','BNBUSDT'], '5m')
grid.setLayout('1x2')

レイアウト：'1x1'、'1x2'、'2x1'、'2x2'、'1x3'、'3x1'、'2x3'、'3x2'。