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.

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 / MCP Native - Supports AI Agent direct control of charts via the Model Context Protocol. Built-in WebSocket-bridged MCP server enables any MCP client (Inspector, Claude Desktop, Cursor, etc.) to zoom, pan, add/remove indicators, and change theme in real time
• 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
• Batch Data Export - Select a date range and export multiple stocks' K-line data into a single CSV file, with progress indication

🚀 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>

4. (Optional) Enable MCP / AI Agent Control

npm install @363045841yyt/klinechart-ai-runtime

<script setup lang="ts">
import KLineChart from '@363045841yyt/klinechart'
import { executeTool } from '@363045841yyt/klinechart-ai-runtime'

const chartRef = ref<InstanceType<typeof KLineChart> | null>(null)

const mcpConfig = {
  wsUrl: 'ws://localhost:8080',
  autoReconnect: true,
  onToolCall: (call) => {
    const ctrl = chartRef.value?.getController?.()
    if (!ctrl) return { success: false, error: 'Controller not ready' }
    return executeTool(ctrl, call)
  },
}
</script>

<template>
  <KLineChart ref="chartRef" :mcp="mcpConfig" />
</template>

Then start the MCP server:

cd packages/ai-runtime
pnpm inspect

Connect via MCP Inspector and call chart.zoomToLevel, indicators.add, etc.

📖 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

🗺️ Roadmap

• K-line zoom anchor stability, improved zoom feel
• Right axis detached from scroll container, completely solving clipping issues
• Blank area drawing support
• Limit vertical pan range to prevent viewport from leaving data
• Drawing system
• Right axis zoom
• Latest price line and right axis label style optimization
• 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

📦 Packages

🚀 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