# Web Component

> The <kline-chart> custom element: attributes, properties and events.

Source: https://kcq.nebutra.com/docs/reference/web-component


<Callout>
  Generated from 

  [`packages/vue/src/web-component.ts`](https://github.com/TsekaLuk/KLineChartQuant/blob/1aa5e22c61313a34d08878ad895e604e0d4a85e9/packages/vue/src/web-component.ts)

   at the pinned commit.
</Callout>

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 `CustomEvent`s whose `detail` is the array of emit arguments; each is dispatched under its camelCase and kebab-case name.

Props [#props]

| Attribute                       | Property                      | Type                                              | Default                      |
| ------------------------------- | ----------------------------- | ------------------------------------------------- | ---------------------------- |
| —                               | <code>symbols</code>          | <code>ReadonlyArray\<SymbolSpec></code>           | —                            |
| —                               | <code>indicators</code>       | <code>ReadonlyArray\<ChartIndicatorConfig></code> | —                            |
| —                               | <code>customMarkers</code>    | <code>ReadonlyArray\<CustomMarkerEntity></code>   | —                            |
| —                               | <code>marketSessions</code>   | <code>ChartMountOptions\['marketSessions']</code> | —                            |
| <code>y-padding-px</code>       | <code>yPaddingPx</code>       | <code>number</code>                               | <code>20</code>              |
| <code>min-k-width</code>        | <code>minKWidth</code>        | <code>number</code>                               | <code>1</code>               |
| <code>max-k-width</code>        | <code>maxKWidth</code>        | <code>number</code>                               | <code>50</code>              |
| <code>right-axis-width</code>   | <code>rightAxisWidth</code>   | <code>number</code>                               | <code>0</code>               |
| <code>left-axis-width</code>    | <code>leftAxisWidth</code>    | <code>number</code>                               | —                            |
| <code>bottom-axis-height</code> | <code>bottomAxisHeight</code> | <code>number</code>                               | <code>24</code>              |
| <code>price-label-width</code>  | <code>priceLabelWidth</code>  | <code>number</code>                               | <code>60</code>              |
| <code>zoom-levels</code>        | <code>zoomLevels</code>       | <code>number</code>                               | <code>20</code>              |
| <code>initial-zoom-level</code> | <code>initialZoomLevel</code> | <code>number</code>                               | <code>3</code>               |
| <code>is-fullscreen</code>      | <code>isFullscreen</code>     | <code>boolean</code>                              | —                            |
| <code>timezone</code>           | <code>timezone</code>         | <code>string</code>                               | <code>'Asia/Shanghai'</code> |
| —                               | <code>settings</code>         | <code>Partial\<ChartSettings></code>              | —                            |
| —                               | <code>legend</code>           | <code>LegendOptions</code>                        | —                            |
| —                               | <code>customData</code>       | <code>CustomDataSource</code>                     | —                            |

Events [#events]

| Event                             | `detail`                                                     |
| --------------------------------- | ------------------------------------------------------------ |
| <code>zoom-level-change</code>    | <code>\[level: number, kWidth: number]</code>                |
| <code>toggle-fullscreen</code>    | `[]`                                                         |
| <code>update:is-fullscreen</code> | <code>\[value: boolean]</code>                               |
| <code>theme-change</code>         | <code>\[theme: 'light' \| 'dark']</code>                     |
| <code>k-line-level-change</code>  | <code>\[level: string]</code>                                |
| <code>k-line-adjust-change</code> | <code>\[adjust: 'qfq' \| 'hfq' \| 'splits' \| 'none']</code> |
| <code>controller-ready</code>     | <code>\[controller: ChartController]</code>                  |