Chart Interface & Viewport
Relevant source files
The following files were used as context for generating this wiki page:
The Chart Interface & Viewport system provides the foundational infrastructure for rendering financial time-series data using HTML5 Canvas. It serves as the primary visual component of the application, enabling high-performance rendering of candlesticks, technical indicators, and graphical overlays. The system is built upon a modular architecture that separates the core chart logic from the React-based frontend implementation, allowing for flexible configuration and real-time data updates.
The viewport manages the visible area of the chart, handling coordinate transformations between screen pixels and data points (timestamp/value). It facilitates user interactions such as zooming, scrolling, and crosshair movement while maintaining a consistent visual state across window resizes and pane adjustments.
Core Architecture and Lifecycle
The chart lifecycle is managed through the init and dispose functions. The init function attaches a new chart instance to a specific DOM element, while dispose cleans up resources to prevent memory leaks. The chart instance provides a comprehensive API for data manipulation, style configuration, and overlay management.
The diagram shows the lifecycle of a chart instance from initialization to disposal.
Key Lifecycle Methods
init(ds: HTMLDivElement | string, style?: any): Initializes a chart instance on a DOM element. Sources:[frontend/src/klinechart/src/core.js:46-77],[frontend/src/pages/chart/index.tsx:112]dispose(dcs: HTMLDivElement | Chart | string): Destroys a chart instance and removes it from the internal instance registry. Sources:[frontend/src/klinechart/src/core.js:83-102],[frontend/src/pages/chart/index.tsx:150]resize(): Forces the chart to recalculate its dimensions based on its container's current size. Sources:[frontend/src/klinechart/types/Chart.d.ts:74],[frontend/src/pages/chart/index.tsx:135]
Viewport and Coordinate System
The Viewport defines the visible window of data. The system uses a dual-coordinate approach to map financial data (K-line points) to pixel positions on the Canvas.
Coordinate Conversion API
The Chart interface provides methods to convert between physical screen coordinates and logical data points:
convertFromPixel(coordinate, finder): Converts Canvas coordinates to data points (Point).convertToPixel(point, finder): Converts data points (Point) to Canvas coordinates.
Sources:[frontend/src/klinechart/types/Chart.d.ts:68-69]
Viewport Configuration
Configuration options allow developers to control the spacing and padding within the viewport:
setOffsetRightSpace(space: number): Sets the margin between the last data point and the right edge of the chart (e.g., set to 600 in the main application). Sources:[frontend/src/klinechart/types/Chart.d.ts:37],[frontend/src/pages/chart/index.tsx:132]setDataSpace(space: number): Controls the horizontal space occupied by each data bar. Sources:[frontend/src/klinechart/types/Chart.d.ts:40]
Data Flow and Subscription
The chart utilizes an asynchronous data flow to handle both historical data loading and real-time updates via GraphQL subscriptions.
Sequence of data operations for initial load, real-time updates, and pagination.
Sources: [frontend/src/pages/chart/index.tsx:65-95]
Configuration and Styling
The chart appearance is controlled via a centralized CHART_OPTIONS object, which defines styles for the grid, candles, axes, and technical indicators.
| Component | Key Styles | Description |
|---|---|---|
| Grid | show, horizontal.color, vertical.style | Controls the background grid visibility and line styles. |
| Candle | priceMark.last.upColor, tooltip.text.size | Styles for candlesticks, price markers, and candle tooltips. |
| Y-Axis | position, type, axisLine.show | Configures axis placement (left/right) and scale type (normal/percentage). |
| Indicators | bar.upColor, line.colors | Default colors and sizes for technical indicator plots. |
Sources: [frontend/src/pages/chart/constants.ts:1-177]
Pane Management and Indicators
The viewport is divided into multiple panes. The primary pane typically displays candles and overlays, while additional panes are created for oscillators and volume indicators.
createTechnicalIndicator(value, isStack, options): Creates a new indicator. IfisStackis false, it typically creates a new pane.addTechnicalIndicatorTemplate(template): Registers custom indicator logic and rendering rules.
Sources:[frontend/src/klinechart/types/Chart.d.ts:48-49],[frontend/src/klinechart/types/TechnicalIndicator.d.ts:71-82]
Technical Indicator Rendering
Custom indicators can hook into the viewport rendering pipeline using the render method in their template:
render: function ({ ctx, dataSource, viewport }) {
// Access Canvas context and viewport dimensions
const barHeight = (viewport.height) / (dataSource.to - dataSource.from);
// Custom drawing logic using ctx
}
Sources: [frontend/src/klinechart/tests/technical-indicator-template2.html:56-78]
Interaction Handling
The system supports several user actions that modify the viewport or state:
- Zooming: Facilitated by
zoomAtCoordinateandzoomAtDataIndex. - Scrolling: Managed via
scrollByDistanceandscrollToRealTime. - Action Subscriptions: The
subscribeActionmethod allows listening to viewport events likezoom,scroll,crosshair, andpane_drag.
Sources:[frontend/src/klinechart/types/Chart.d.ts:59-66],[frontend/src/klinechart/types/Chart.d.ts:70-71]