Vue component
Props, events and slots of <KlineChart>, generated from KLineChart.vue.
| Prop | Type | Default | Description |
|---|
symbols | ReadonlyArray<SymbolSpec> | — | Controlled instrument list. When set, the component syncs it into the chart's data sources. |
indicators | ReadonlyArray<ChartIndicatorConfig> | — | Controlled indicator instances. When set, it replaces the current instances as a whole. |
custom-markers | ReadonlyArray<CustomMarkerEntity> | — | Controlled custom markers. When set, it replaces the current custom markers as a whole. |
market-sessions | ChartMountOptions['marketSessions'] | — | Market trading-session overrides for this chart instance. |
y-padding-px | number | 20 | Vertical padding inside the price pane, in CSS pixels. |
min-k-width | number | 1 | Narrowest candle width when zoomed out, in CSS pixels. |
max-k-width | number | 50 | Widest candle width when zoomed in, in CSS pixels. |
right-axis-width | number | 0 | Width of the right price axis. |
left-axis-width | number | — | Width of the left price axis; 0 hides it. |
bottom-axis-height | number | 24 | Height of the bottom time axis. |
price-label-width | number | 60 | Extra width of the last-price label, used for the change percentage. |
zoom-levels | number | 20 | Number of zoom levels. |
initial-zoom-level | number | 3 | Zoom level at mount, from 1 to zoomLevels. |
is-fullscreen | boolean | — | Controlled fullscreen state. Leave it unbound and the component manages fullscreen itself. |
timezone | string | 'Asia/Shanghai' | IANA time zone used for dates and times on the axes and tooltips. |
settings | Partial<ChartSettings> | — | Chart settings, merged per key: keys you pass win, other keys fall back to what the browser stored, then to defaults. |
legend | LegendOptions | — | Canvas legend configuration for the main pane. Core draws it; it never enters the Vue update path. |
custom-data | CustomDataSource | — | Inline data bundle ({ symbol?, period?, data, comparisons? }). The chart uses it instead of fetching. |
| Event | Payload | Description |
|---|
@zoom-level-change | level: number, kWidth: number | The zoom level changed. |
@toggle-fullscreen | — | The fullscreen button was pressed. |
@update:is-fullscreen | value: boolean | Fullscreen state for v-model:is-fullscreen. |
@theme-change | theme: 'light' | 'dark' | The user switched between light and dark. |
@k-line-level-change | level: string | The user picked another period. |
@k-line-adjust-change | adjust: 'qfq' | 'hfq' | 'splits' | 'none' | The user picked another price adjustment. |
@controller-ready | controller: ChartController | The headless ChartController is ready; use it for imperative calls. |
| Slot | Scope | Description |
|---|
#source-management | — | Host-managed market-data connections and credentials. The chart never holds keys. |
#toolbar-start | — | Start of the top toolbar, for host controls such as an account menu. |
#toolbar-end | — | End of the top toolbar. |
#legend | LegendSlotProps | Replaces the main pane's default legend. Receives the core legend template context. |
#kline-tooltip | KlineTooltipSlotProps | Custom candle tooltip; rendered on hover (not on mobile) with the hovered bar. |
#marker-tooltip | MarkerTooltipSlotProps | Custom marker tooltip; rendered while a marker is hovered. |