Web Component
The <kline-chart> custom element: attributes, properties and events.
Generated from
packages/vue/src/web-component.ts at the pinned commit.The element is <kline-chart>, built with Vue's defineCustomElement and rendered in a shadow root. Primitive props are reflected as kebab-case attributes; arrays and objects must be set as JavaScript properties. Events are CustomEvents whose detail is the array of emit arguments; each is dispatched under its camelCase and kebab-case name.
Props
| Attribute | Property | Type | Default |
|---|---|---|---|
| — | symbols | ReadonlyArray<SymbolSpec> | — |
| — | indicators | ReadonlyArray<ChartIndicatorConfig> | — |
| — | customMarkers | ReadonlyArray<CustomMarkerEntity> | — |
| — | marketSessions | ChartMountOptions['marketSessions'] | — |
y-padding-px | yPaddingPx | number | 20 |
min-k-width | minKWidth | number | 1 |
max-k-width | maxKWidth | number | 50 |
right-axis-width | rightAxisWidth | number | 0 |
left-axis-width | leftAxisWidth | number | — |
bottom-axis-height | bottomAxisHeight | number | 24 |
price-label-width | priceLabelWidth | number | 60 |
zoom-levels | zoomLevels | number | 20 |
initial-zoom-level | initialZoomLevel | number | 3 |
is-fullscreen | isFullscreen | boolean | — |
timezone | timezone | string | 'Asia/Shanghai' |
| — | settings | Partial<ChartSettings> | — |
| — | legend | LegendOptions | — |
| — | customData | CustomDataSource | — |
Events
| Event | detail |
|---|---|
zoom-level-change | [level: number, kWidth: number] |
toggle-fullscreen | [] |
update:is-fullscreen | [value: boolean] |
theme-change | [theme: 'light' | 'dark'] |
k-line-level-change | [level: string] |
k-line-adjust-change | [adjust: 'qfq' | 'hfq' | 'splits' | 'none'] |
controller-ready | [controller: ChartController] |