Installation

KLineChartQuant ships as a framework-free core plus thin bindings. Install the binding for your stack; it brings the chart UI, and the core does the work underneath.

Choose a package

Package managers do not always install peer dependencies for you, so the commands below list them explicitly.

Install

Vue

pnpm add @363045841yyt/klinechart @363045841yyt/klinechart-core @363045841yyt/klinechart-agent-runtime vue

npm install @363045841yyt/klinechart @363045841yyt/klinechart-core @363045841yyt/klinechart-agent-runtime vue

yarn add @363045841yyt/klinechart @363045841yyt/klinechart-core @363045841yyt/klinechart-agent-runtime vue

Import the stylesheet once, usually in your entry file:

import '@363045841yyt/klinechart/style.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

React

pnpm add @363045841yyt/klinechart-react @363045841yyt/klinechart-core react

npm install @363045841yyt/klinechart-react @363045841yyt/klinechart-core react

yarn add @363045841yyt/klinechart-react @363045841yyt/klinechart-core react

The React package depends on @363045841yyt/klinechart and loads its Web Component build on the client. That build carries its own styles inside the shadow root, so there is no stylesheet to import.

Web Component

Install @363045841yyt/klinechart as for Vue, then import the element entry:

import '@363045841yyt/klinechart/web-component'

This entry registers <kline-chart> and bundles Vue, the core and the built-in market-data sources into one module, so the page does not need Vue of its own. Styles are injected into the element's shadow root.

Exports

The full list for each package is in the package reference.

Node version

The packages are ES modules for bundlers. The Vue package declares node ^22.12.0 || >=24.0.0 and the agent runtime declares ^22.19.0 || >=24.0.0. If you work on the KLineChartQuant monorepo itself, it requires ^22.19.0 || >=24.11.0.

Rendering backends

The chart draws with WebGPU, WebGL2 or Canvas2D. Which one it uses comes from the rendererBackend setting, resolved in this order:

1. rendererBackend passed explicitly in the settings prop.
2. The value the user saved earlier, stored in the browser.
3. A one-time capability check of the browser: WebGPU if available, then WebGL2, then Canvas2D.

At runtime the renderer host still falls back if the preferred backend fails to start: webgpu tries WebGPU, then WebGL, then Canvas; webgl tries WebGL, then Canvas. Without a usable DOM, such as during server rendering, the preference defaults to webgl and nothing is drawn until the chart mounts in a browser.

To pin a backend, for example for screenshot tests:

<KlineChart :settings="{ rendererBackend: 'canvas' }" />

The rendering pipeline explains how frames are built and submitted.

Next