How david1x/klinechart works
KLineChart is a lightweight HTML5-canvas financial chart library. A host application initializes a chart through the public API, configures its period and extensions, and supplies market data through a data loader; the chart presents that data in panes with axes, indicators, overlays, and crosshair features. The tree and README support the major rendering and extension subsystems, while the sampled source confirms API initialization, loader setup, and indicator calculations. Some internal wiring is not shown in the excerpts, so uncertain calls are omitted.
Main entry points: Chart.ts Chart instance · Pane.ts Chart panes · DataLoader.ts Data loader · Figure.ts Canvas figures
Components 21
Chart API
- Public API
src/index.ts - Chart instance
src/Chart.ts - Chart options
src/Options.ts - Chart store
src/Store.ts - Data loader
src/common/DataLoader.ts - Market data
src/common/Data.ts
Chart rendering
- Chart panes
src/pane/Pane.ts - Pane widgets
src/widget/Widget.ts - Chart views
src/view/View.ts - Canvas figures
src/component/Figure.ts - Chart axes
src/component/Axis.ts
Chart extensions
- Indicator calculations
src/extension/indicator/index.ts - Drawing overlays
src/extension/overlay/index.ts - Figure extensions
src/extension/figure/index.ts - Style themes
src/extension/styles/index.ts - Locales
src/extension/i18n/index.ts - Hotkey extensions
src/extension/hotkey/index.ts
Interaction
- Pointer events
src/common/EventHandler.ts - Crosshair feature
src/view/CrosshairFeatureView.ts
Other components
- Host application
- Market data source
Connections 20
- Host application → Public API: calls API
- Public API → Chart instance: creates instance
- Host application → Chart instance: configures chart
- Host application → Data loader: supplies loader
- Market data source → Data loader: provides bars
- Data loader → Market data: returns bars
- Chart instance → Chart store: manages state
- Chart instance → Chart panes: renders panes
- Chart panes → Pane widgets: uses widgets
- Pane widgets → Chart views: draws views
- Chart views → Canvas figures: draws figures
- Chart panes → Chart axes: lays out axes
- Indicator calculations → Chart panes: supplies indicators
- Drawing overlays → Chart panes: supplies drawings
- Figure extensions → Canvas figures: registers figures
- Style themes → Chart instance: registers themes
- Locales → Chart instance: registers locales
- Hotkey extensions → Chart instance: registers shortcuts
- Pointer events → Crosshair feature: dispatches gestures
- Crosshair feature → Canvas figures: draws features