# Vue component

> Props, events and slots of <KlineChart>, generated from KLineChart.vue.

Source: https://kcq.nebutra.com/docs/reference/vue


<Callout>
  Generated from 

  [`packages/vue/src/components/KLineChart.vue`](https://github.com/TsekaLuk/KLineChartQuant/blob/1aa5e22c61313a34d08878ad895e604e0d4a85e9/packages/vue/src/components/KLineChart.vue)

   at the pinned commit.
</Callout>

Props [#props]

| Prop                            | Type                                              | Default                      | Description                                                                                                           |
| ------------------------------- | ------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| <code>symbols</code>            | <code>ReadonlyArray\<SymbolSpec></code>           | —                            | Controlled instrument list. When set, the component syncs it into the chart's data sources.                           |
| <code>indicators</code>         | <code>ReadonlyArray\<ChartIndicatorConfig></code> | —                            | Controlled indicator instances. When set, it replaces the current instances as a whole.                               |
| <code>custom-markers</code>     | <code>ReadonlyArray\<CustomMarkerEntity></code>   | —                            | Controlled custom markers. When set, it replaces the current custom markers as a whole.                               |
| <code>market-sessions</code>    | <code>ChartMountOptions\['marketSessions']</code> | —                            | Market trading-session overrides for this chart instance.                                                             |
| <code>y-padding-px</code>       | <code>number</code>                               | <code>20</code>              | Vertical padding inside the price pane, in CSS pixels.                                                                |
| <code>min-k-width</code>        | <code>number</code>                               | <code>1</code>               | Narrowest candle width when zoomed out, in CSS pixels.                                                                |
| <code>max-k-width</code>        | <code>number</code>                               | <code>50</code>              | Widest candle width when zoomed in, in CSS pixels.                                                                    |
| <code>right-axis-width</code>   | <code>number</code>                               | <code>0</code>               | Width of the right price axis.                                                                                        |
| <code>left-axis-width</code>    | <code>number</code>                               | —                            | Width of the left price axis; 0 hides it.                                                                             |
| <code>bottom-axis-height</code> | <code>number</code>                               | <code>24</code>              | Height of the bottom time axis.                                                                                       |
| <code>price-label-width</code>  | <code>number</code>                               | <code>60</code>              | Extra width of the last-price label, used for the change percentage.                                                  |
| <code>zoom-levels</code>        | <code>number</code>                               | <code>20</code>              | Number of zoom levels.                                                                                                |
| <code>initial-zoom-level</code> | <code>number</code>                               | <code>3</code>               | Zoom level at mount, from 1 to zoomLevels.                                                                            |
| <code>is-fullscreen</code>      | <code>boolean</code>                              | —                            | Controlled fullscreen state. Leave it unbound and the component manages fullscreen itself.                            |
| <code>timezone</code>           | <code>string</code>                               | <code>'Asia/Shanghai'</code> | IANA time zone used for dates and times on the axes and tooltips.                                                     |
| <code>settings</code>           | <code>Partial\<ChartSettings></code>              | —                            | Chart settings, merged per key: keys you pass win, other keys fall back to what the browser stored, then to defaults. |
| <code>legend</code>             | <code>LegendOptions</code>                        | —                            | Canvas legend configuration for the main pane. Core draws it; it never enters the Vue update path.                    |
| <code>custom-data</code>        | <code>CustomDataSource</code>                     | —                            | Inline data bundle (\{ symbol?, period?, data, comparisons? }). The chart uses it instead of fetching.                |

Events [#events]

| Event                              | Payload                                                   | Description                                                         |
| ---------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------- |
| <code>@zoom-level-change</code>    | <code>level: number, kWidth: number</code>                | The zoom level changed.                                             |
| <code>@toggle-fullscreen</code>    | —                                                         | The fullscreen button was pressed.                                  |
| <code>@update:is-fullscreen</code> | <code>value: boolean</code>                               | Fullscreen state for v-model:is-fullscreen.                         |
| <code>@theme-change</code>         | <code>theme: 'light' \| 'dark'</code>                     | The user switched between light and dark.                           |
| <code>@k-line-level-change</code>  | <code>level: string</code>                                | The user picked another period.                                     |
| <code>@k-line-adjust-change</code> | <code>adjust: 'qfq' \| 'hfq' \| 'splits' \| 'none'</code> | The user picked another price adjustment.                           |
| <code>@controller-ready</code>     | <code>controller: ChartController</code>                  | The headless ChartController is ready; use it for imperative calls. |

Slots [#slots]

| Slot                            | Scope                               | Description                                                                         |
| ------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------- |
| <code>#source-management</code> | —                                   | Host-managed market-data connections and credentials. The chart never holds keys.   |
| <code>#toolbar-start</code>     | —                                   | Start of the top toolbar, for host controls such as an account menu.                |
| <code>#toolbar-end</code>       | —                                   | End of the top toolbar.                                                             |
| <code>#legend</code>            | <code>LegendSlotProps</code>        | Replaces the main pane's default legend. Receives the core legend template context. |
| <code>#kline-tooltip</code>     | <code>KlineTooltipSlotProps</code>  | Custom candle tooltip; rendered on hover (not on mobile) with the hovered bar.      |
| <code>#marker-tooltip</code>    | <code>MarkerTooltipSlotProps</code> | Custom marker tooltip; rendered while a marker is hovered.                          |