KLineChart Documentation

KLineChart is a professional-grade, lightweight financial charting library for web frontends, specifically designed for K-line (candlestick) and derivative market data scenarios. It is suitable for trading platforms, market analysis, and investment research systems.

Key features include:

• Out-of-the-box: Simple and fast integration with minimal setup cost.
• Lightweight & Smooth: Zero dependencies, with a size of only 40k under Gzip compression.
• Powerful: Built-in support for various technical indicators and drawing models.
• Highly Extensible: Rich style configurations and APIs for custom functionality.
• Mobile Support: Single chart implementation works across multiple platforms/devices.
• TypeScript Support: Provides complete type definitions for robust development.

KLineChart is a professional, lightweight financial charting library designed for web applications focusing on candlestick and market data.

Key features include:

• Zero dependencies: Lightweight bundle size (under 40k gzip).
• Out of the box: Simple and fast integration.
• Powerful functions: Built-in technical indicators and line drawing models.
• Highly scalable: Rich style configuration and extensible API.
• Mobile support: Single chart implementation that handles multiple terminals.
• TypeScript support: Complete type definition files provided.

KLineChart provides specialized skill files to assist AI agents and developers. The following files contain specific knowledge categories:

• SKILL.md: Main skill containing minimal examples, data loading, framework integration, indicators/overlays, v9 migration, and troubleshooting.
• api-reference.md: v10 API quick reference.
• examples.md: Full copy-paste examples.
• prompts.md: Prompt templates for common tasks.

To integrate KLineChart (v10) into your project, follow this specific initialization sequence: init → setSymbol → setPeriod → setDataLoader. The container element must have an explicit width and height defined in CSS.

import { init, dispose } from 'klinecharts'

const chart = init('chart') // HTMLElement or id
chart.setSymbol({ ticker: 'BTCUSDT', pricePrecision: 2, volumePrecision: 0 })
chart.setPeriod({ span: 1, type: 'day' })
chart.setDataLoader({
  getBars: ({ callback }) => {
    callback([
      { timestamp: 1517846400000, open: 7424.6, high: 7511.3, low: 6032.3, close: 7310.1, volume: 224461 },
    ])
  }
})
// cleanup: dispose('chart')

To use klinecharts in a Vue application, initialize the chart within the onMounted lifecycle hook to ensure the DOM element is available. Use init(id) to create the chart instance and dispose(id) within the onUnmounted hook to clean up the chart and prevent memory leaks.

Key steps:

1. Import init and dispose from klinecharts.
2. Create a container element (e.g., <div id="chart">).
3. Call init('chart') inside onMounted.
4. Call dispose('chart') inside onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { init, dispose } from 'klinecharts'

onMounted(() => {
  const chart = init('chart')
  // Configure chart here...
})

onUnmounted(() => {
  dispose('chart')
})
</script>

<template>
  <div id="chart" style="width:600px;height:600px"/>
</template>

If you are using an IDE that supports Agent Skills (such as Cursor), you can add KLineChart skills to your environment to improve development efficiency. This provides the agent with context regarding minimal examples, data loading, framework integration, indicators, overlays, v9 migration, and troubleshooting.

Use the following command to add the skills:

npx skills add klinecharts/KLineChart

Because the chart depends on the DOM and Canvas API, it cannot be initialized during the server-side rendering (SSR) phase.

To avoid errors in SSR frameworks like Next.js or Nuxt:

• Only execute init(...) after the component has mounted on the client side.
• Do not attempt to read or access the container DOM element at the top level of a module.
• If the chart container is rendered conditionally (e.g., inside a hidden tab or modal), wait until the container is actually visible before initializing or manually calling resize(...).

The chart automatically fills its parent container, so the container must have explicit dimensions.

Best practices for container setup:

• Ensure the container has a defined height.
• If the width is adaptive, ensure the parent layout is stable before initialization.
• If the container starts as display: none or is inside an inactive tab, you must call resize(...) once the container becomes visible to ensure the chart renders correctly.

Troubleshooting: If the chart only shows a single line or has abnormal height, check if the container has a valid width and height.

You can customize the appearance of almost all visual elements on the chart, including points and lines. Styles can be applied in two ways:

1. During initialization: Pass a styles object within the options parameter of the init(ds, options) method.
2. After initialization: Use the setStyles(styles) method on the chart instance to update styles dynamically.