KlineChart Submodule Setup
Relevant source files
The following files were used as context for generating this wiki page:
The KlineChart submodule is a lightweight financial charting library built with HTML5 canvas. Within this project, it serves as the core visualization engine for displaying k-line (candlestick) data, technical indicators, and interactive drawing shapes. It supports extensive customization through templates for indicators and overlays, allowing the application to render complex financial analysis tools such as Moving Averages (MA), MACD, and custom volume heatmaps.
Sources: frontend/src/klinechart/README.md:1-5, frontend/src/pages/chart/index.tsx:125-140
Core Installation and Build
The submodule is managed as a dependency named klinecharts. It can be installed via standard package managers or included via CDN. The build process utilizes Rollup for core logic and Babel for extensions.
Installation Methods
| Method | Command / Link |
|---|---|
| npm | npm install klinecharts --save |
| yarn | yarn add klinecharts |
| unpkg CDN | https://unpkg.com/klinecharts/dist/klinecharts.min.js |
| jsDelivr CDN | https://cdn.jsdelivr.net/npm/klinecharts/dist/klinecharts.min.js |
Sources: frontend/src/klinechart/README.md:23-45
Build Scripts
The package.json within the submodule defines the following lifecycle scripts:
npm run build-extension: Compiles Babel extensions into thelibdirectory.npm run build-core: Executes Rollup to bundle the core library using./config/rollup.config.js.npm run build: Orchestrates both extension and core builds.
Sources: frontend/src/klinechart/package.json:34-40
Initialization and Lifecycle
The chart is initialized by targeting a DOM element and optionally providing configuration styles. The project uses a dedicated React page component to manage the chart instance, handling data subscriptions and resizing.
Initialization Flow
The following diagram illustrates the initialization sequence within the React application:
The diagram shows the chart creation, template registration, and initial data population.
Sources: frontend/src/pages/chart/index.tsx:125-165
Key Functions
init(ds: HTMLDivElement | string, style?: any): Creates a chart instance.dispose(dcs: HTMLDivElement | Chart | string): Destroys the instance and cleans up resources.resize(): Recalculates chart dimensions to fit its container.
Sources: frontend/src/klinechart/types/index.d.ts:47-49, frontend/src/pages/chart/index.tsx:157-159
Configuration and Styling
Styles can be applied during initialization or dynamically updated. Configuration covers grid lines, candle colors, axis appearance, and crosshair settings.
Style Options Summary
| Category | Configurable Elements |
|---|---|
| Grid | Horizontal and vertical line colors. |
| Candle | Price marks (high/low), tooltip text colors, and labels. |
| Axes | Axis lines, tick lines, and tick text for both X and Y axes. |
| Crosshair | Horizontal/vertical line styles and text background colors. |
Sources: frontend/src/klinechart/tests/styles1.html:43-100, frontend/src/pages/chart/index.tsx:142-153
// Example of dynamic style updates
chart.setStyleOptions({
grid: {
horizontal: { color: '#292929' },
vertical: { color: '#292929' }
},
candle: {
tooltip: { text: { color: '#929AA5' } }
}
});
Sources: frontend/src/klinechart/tests/styles2.html:44-60
Technical Indicators Integration
The system supports built-in indicators and custom templates. Indicators are rendered in specific "panes" (e.g., candle_pane for the main chart or separate sub-panes).
Template Definition
Custom indicators are defined using the TechnicalIndicatorTemplate interface. This allows for custom calculation logic and rendering.
The flow shows the steps required to integrate a new technical indicator into the chart.
Sources: frontend/src/pages/chart/indicatorsTemplates/volume.ts:4-100, frontend/src/klinechart/tests/technical-indicator-template1.html:46-56
Common Indicator API
createTechnicalIndicator(name, isStack, options): Adds an indicator to the chart.overrideTechnicalIndicator(options, paneId): Modifies properties (like precision or params) of an existing indicator.addTechnicalIndicatorTemplate(template): Registers a new custom indicator logic.
Sources: frontend/src/klinechart/tests/technical-indicator.html:43-52, frontend/src/klinechart/tests/technical-indicator-override.html:43-68
Data Management
KlineChart handles data through three primary methods to support real-time updates and historical scrolling.
Data Update Methods
- applyNewData(dataList): Replaces the current dataset with a new array.
- updateData(data): Appends or updates the latest candle (useful for WebSocket streams).
- applyMoreData(dataList): Prepends historical data when the user scrolls to the beginning (pagination).
Sources: frontend/src/pages/chart/index.tsx:100-115, frontend/src/klinechart/tests/load-more.html:45-53
Summary
The KlineChart submodule setup involves initializing the canvas engine, configuring visual styles, and extending functionality through indicator templates. Its integration with the project's GraphQL backend enables seamless data streaming and persistent drawing storage, providing a robust environment for technical analysis.
Sources: frontend/src/pages/chart/index.tsx:125-230, frontend/src/klinechart/README.md:1-10