High-performance financial chart library with a single-frame generation time of just 2ms, stable scrolling at 190–200fps in a 200Hz environment, native support for AI Agent control, full-link ResizeObserver-driven crisp rendering, and a pluggable architecture.

English | 简体中文

📈 KLineChartQuant

Crisp Rendering · High Performance · Optimized Interaction · Mobile-Friendly

A lightweight financial K-line charting library focused on quantitative trading scenarios. Agent is a first-class citizen — supports AI Agent direct control of chart operations, providing TradingView-level interaction experience.

✨ Core Features

• Agent First - Supports AI Agent direct control of charts, zoom, pan, and draw operations can all be called programmatically
• Crisp Rendering - Full-chain ResizeObserver driven, physical pixel alignment, K-lines, wicks, and lines are sharp and clear on all DPR screens
• Plugin Architecture - Renderer plugin-based design, supporting dynamic registration, configuration, and lifecycle management
• Custom Markers - Supports semantic configuration of custom markers and custom information
• High Performance - Smoothly handles tens of thousands of data points, no lag during zoom or pan; supports 190-200fps on 200Hz displays with single-frame generation time as low as 2ms
• WebGL Rendering - K-lines, volume bars, and MACD bars rendered via WebGL for GPU-accelerated performance, reaching 190fps on 200Hz displays with per-frame GPU time under 1ms
• Optimized Interaction - Stable zoom anchor, precise crosshair cursor, smooth drag
• Mobile-Optimized Interaction - Long-press crosshair for data exploration, tap to dismiss, slide to browse data without triggering chart scroll, gesture-based scroll mode
• Multi-Symbol Comparison - Supports unlimited number of instruments for trend comparison
• Multi-Source Aggregation - Supports aggregation and unification of multiple data sources

🚀 Quick Start

Prerequisites

KLineChart requires a stock data backend. Please ensure kmap and stockbao are in the same directory:

workspace/
├── KLineChartQuant/ # This repository
└── stockbao/    # Data backend repository

1. Clone Repositories

git clone https://github.com/363045841/KLineChartQuant.git
git clone https://github.com/363045841/stockbao.git

2. Start Data Backend

cd KLineChartQuant
npm run stockbao

After startup, the API is available at http://localhost:8000

3. Install and Use

npm install @363045841yyt/klinechart

<script setup lang="ts">
import KLineChart from '@363045841yyt/klinechart';
import type { SemanticChartConfig } from '@363045841yyt/klinechart';

const config: SemanticChartConfig = {
  version: '1.0.0',
  data: {
    source: 'baostock',
    code: 'sh.000001',
    startDate: '2024-01-01',
    endDate: '2024-12-31',
    frequency: 'day'
  },
  indicators: {
    main: [{ type: 'MA', params: [5, 10, 20] }],
    sub: [{ type: 'MACD' }]
  }
};
</script>

<template>
  <KLineChart
    :semanticConfig="config"
    :yPaddingPx="24"
  />
</template>

Inject Custom Data Directly (Without Fetcher)

<script setup lang="ts">
import KLineChart from '@363045841yyt/klinechart'
import type { CustomDataSource, KLineData } from '@363045841yyt/klinechart'

const myData: KLineData[] = [
  { timestamp: 1748736000000, date: '2025-06-01', open: 30, high: 32, low: 30, close: 31.5, volume: 1500000 },
  { timestamp: 1748822400000, date: '2025-06-02', open: 31.5, high: 33.2, low: 31.2, close: 33, volume: 2100000 },
]

const customDataSource: CustomDataSource = {
  symbol: 'MY.STOCK',
  period: 'daily',
  data: myData,
  comparisons: {
    'COMP.A': [ /* comparison KLineData[] */ ],
    'COMP.B': [ /* comparison KLineData[] */ ],
  },
}
</script>

<template>
  <KLineChart :customData="customDataSource" />
</template>

📖 More Documentation

• Rendering Engine Architecture - Core rendering pipeline and physical pixel alignment mechanism
• Plugin System - Extension mechanism and custom development
• Renderer Development Guide - Custom renderer development

📋 Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | semanticConfig | SemanticChartConfig | required | Semantic configuration, the only control source for chart data and indicators | | yPaddingPx | number | 0 | Y-axis padding in pixels | | minKWidth | number | 2 | Minimum K-line width (logical pixels) | | maxKWidth | number | 50 | Maximum K-line width (logical pixels) | | rightAxisWidth | number | 0 | Right price axis width | | bottomAxisHeight | number | 24 | Bottom time axis height | | priceLabelWidth | number | 60 | Price label extra width for showing change percentage | | zoomLevels | number | 20 | Total number of zoom levels | | initialZoomLevel | number | 3 | Initial zoom level (1 ~ zoomLevels) | | customData | CustomDataSource | — | Inline data bundle: { symbol?, period?, data, comparisons? }. Bypasses the fetcher pipeline entirely |

🗺️ Roadmap

• [x] K-line zoom anchor stability, improved zoom feel
• [x] Right axis detached from scroll container, completely solving clipping issues
• [x] Blank area drawing support
• [x] Limit vertical pan range to prevent viewport from leaving data
• [x] Drawing system
• [x] Right axis zoom
• [x] Latest price line and right axis label style optimization
• [x] Area primitive tools and rendering
• [ ] More advanced drawing tools
• [ ] Support for minute, multi-day, monthly, and yearly K-line display
• [ ] Support convert the drawing to quant code

🚀 What's New

• v0.8 Symbol comparison, multi-source data aggregation
• v0.7 Renderer registration chain AOP refactoring with decorator syntax, monorepo split, Vue/React bindings (experimental), standalone core package, tokenized color system
• v0.6.10 Unified WebGL rendering context sharing for all panes, plus sub-pane lifecycle refactoring — centralized pane instance management via SubPaneManager with first-class paneId identity
• v0.6.6 Comprehensive rendering optimizations: batched price-to-Y calculations, cached tick positions and geometry, optimized month-key operations; achieves stable 190-200fps on 200Hz displays with frame generation time down to 2ms
• v0.6.3 WebGL rendering for K-lines, volume bars, and MACD bars; significant performance boost across the board
• v0.6.1 Dual-layer canvas architecture: Main + Overlay separation with UpdateLevel filtering, achieves stable 180fps with low jitter on 200Hz displays
• v0.6.0 Stateless indicator pipeline: MA/BOLL/EXPMA/ENE/RSI/CCI/STOCH/MOM/WMSR/KST/FASTK now use unified Calculator → Scheduler → StateStore → Renderer architecture for better performance and maintainability
• v0.5.6 Logarithmic price axis with evenly distributed grid lines at pixel level
• v0.5.2 Advanced drawing tools: parallel channel, regression channel, smooth top/bottom, and non-intersecting channel
• v0.5.0 Complete drawing tool system, supporting line, rectangle, text drawing and style editing
• v0.4 Modern UI, left toolbar, right axis optimization, TradingView-style zoom feel

📄 License

MIT