# React component

> Props of <KLineChartWC>, generated from the React wrapper.

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


<Callout>
  Generated from 

  [`packages/react/src/KLineChartWC.tsx`](https://github.com/TsekaLuk/KLineChartQuant/blob/1aa5e22c61313a34d08878ad895e604e0d4a85e9/packages/react/src/KLineChartWC.tsx)

   at the pinned commit.
</Callout>

`KLineChartWC` renders the `<kline-chart>` custom element and registers it on the client. It forwards the props below as attributes and listens for the two events; other Vue props are not exposed.

Props [#props]

| Prop                            | Type                                                              | Attribute                       | Description                                                                                                                   |
| ------------------------------- | ----------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| <code>yPaddingPx</code>         | <code>number</code>                                               | <code>y-padding-px</code>       | Vertical padding inside the price pane, in CSS pixels.                                                                        |
| <code>minKWidth</code>          | <code>number</code>                                               | <code>min-k-width</code>        | Narrowest candle width when zoomed out, in CSS pixels.                                                                        |
| <code>maxKWidth</code>          | <code>number</code>                                               | <code>max-k-width</code>        | Widest candle width when zoomed in, in CSS pixels.                                                                            |
| <code>rightAxisWidth</code>     | <code>number</code>                                               | <code>right-axis-width</code>   | Width of the right price axis.                                                                                                |
| <code>bottomAxisHeight</code>   | <code>number</code>                                               | <code>bottom-axis-height</code> | Height of the bottom time axis.                                                                                               |
| <code>priceLabelWidth</code>    | <code>number</code>                                               | <code>price-label-width</code>  | Extra width of the last-price label, used for the change percentage.                                                          |
| <code>zoomLevels</code>         | <code>number</code>                                               | <code>zoom-levels</code>        | Number of zoom levels.                                                                                                        |
| <code>initialZoomLevel</code>   | <code>number</code>                                               | <code>initial-zoom-level</code> | Zoom level at mount, from 1 to zoomLevels.                                                                                    |
| <code>isFullscreen</code>       | <code>boolean</code>                                              | <code>is-fullscreen</code>      | Controlled fullscreen state. Leave it unbound and the component manages fullscreen itself.                                    |
| <code>onZoomLevelChange</code>  | <code>(detail: \{ level: number; kWidth: number }) => void</code> | —                               | Listens for `zoom-level-change`. Receives the event's `detail`, which Vue dispatches as the emit arguments `[level, kWidth]`. |
| <code>onToggleFullscreen</code> | <code>() => void</code>                                           | —                               | Listens for `toggle-fullscreen`.                                                                                              |
| <code>style</code>              | <code>CSSProperties</code>                                        | —                               | Applied to the host element.                                                                                                  |
| <code>className</code>          | <code>string</code>                                               | —                               | Applied to the host element.                                                                                                  |