# david1x/klinechart architecture

> Architecture diagram of the GitHub repository david1x/klinechart, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/david1x/klinechart
- Repository: https://github.com/david1x/klinechart

## Overview

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: [`src/Chart.ts`](https://github.com/david1x/klinechart/blob/main/src/Chart.ts) (Chart instance), [`src/pane/Pane.ts`](https://github.com/david1x/klinechart/blob/main/src/pane/Pane.ts) (Chart panes), [`src/common/DataLoader.ts`](https://github.com/david1x/klinechart/blob/main/src/common/DataLoader.ts) (Data loader), [`src/component/Figure.ts`](https://github.com/david1x/klinechart/blob/main/src/component/Figure.ts) (Canvas figures)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Chart API"]
  node_public_api["Public API<br/>[index.ts]"]
  node_chart["Chart instance<br/>[Chart.ts]"]
  node_options["Chart options<br/>[Options.ts]"]
  node_store["Chart store<br/>[Store.ts]"]
  node_loader["Data loader<br/>[DataLoader.ts]"]
  node_data["Market data<br/>[Data.ts]"]
end

subgraph group_render["Chart rendering"]
  node_panes["Chart panes<br/>[Pane.ts]"]
  node_widgets["Pane widgets<br/>[Widget.ts]"]
  node_views["Chart views<br/>[View.ts]"]
  node_canvas["Canvas figures<br/>[Figure.ts]"]
  node_axes["Chart axes<br/>[Axis.ts]"]
end

subgraph group_extensions["Chart extensions"]
  node_indicators["Indicator calculations<br/>[index.ts]"]
  node_overlays["Drawing overlays<br/>[index.ts]"]
  node_figure_ext["Figure extensions<br/>[index.ts]"]
  node_styles["Style themes<br/>[index.ts]"]
  node_locale["Locales<br/>[index.ts]"]
  node_hotkeys["Hotkey extensions<br/>[index.ts]"]
end

subgraph group_interaction["Interaction"]
  node_events["Pointer events<br/>[EventHandler.ts]"]
  node_crosshair["Crosshair feature"]
end

node_host(("Host application"))
node_market(("Market data source"))

node_host -->|"calls API"| node_public_api
node_public_api -->|"creates instance"| node_chart
node_host -->|"configures chart"| node_chart
node_host -->|"supplies loader"| node_loader
node_market -.->|"provides bars"| node_loader
node_loader -->|"returns bars"| node_data
node_chart -->|"manages state"| node_store
node_chart -->|"renders panes"| node_panes
node_panes -->|"uses widgets"| node_widgets
node_widgets -->|"draws views"| node_views
node_views -->|"draws figures"| node_canvas
node_panes -->|"lays out axes"| node_axes
node_indicators -->|"supplies indicators"| node_panes
node_overlays -->|"supplies drawings"| node_panes
node_figure_ext -->|"registers figures"| node_canvas
node_styles -->|"registers themes"| node_chart
node_locale -->|"registers locales"| node_chart
node_hotkeys -->|"registers shortcuts"| node_chart
node_events -->|"dispatches gestures"| node_crosshair
node_crosshair -->|"draws features"| node_canvas

click node_public_api "https://github.com/david1x/klinechart/blob/main/src/index.ts"
click node_chart "https://github.com/david1x/klinechart/blob/main/src/Chart.ts"
click node_options "https://github.com/david1x/klinechart/blob/main/src/Options.ts"
click node_store "https://github.com/david1x/klinechart/blob/main/src/Store.ts"
click node_loader "https://github.com/david1x/klinechart/blob/main/src/common/DataLoader.ts"
click node_data "https://github.com/david1x/klinechart/blob/main/src/common/Data.ts"
click node_panes "https://github.com/david1x/klinechart/blob/main/src/pane/Pane.ts"
click node_widgets "https://github.com/david1x/klinechart/blob/main/src/widget/Widget.ts"
click node_views "https://github.com/david1x/klinechart/blob/main/src/view/View.ts"
click node_canvas "https://github.com/david1x/klinechart/blob/main/src/component/Figure.ts"
click node_axes "https://github.com/david1x/klinechart/blob/main/src/component/Axis.ts"
click node_indicators "https://github.com/david1x/klinechart/blob/main/src/extension/indicator/index.ts"
click node_overlays "https://github.com/david1x/klinechart/blob/main/src/extension/overlay/index.ts"
click node_figure_ext "https://github.com/david1x/klinechart/blob/main/src/extension/figure/index.ts"
click node_styles "https://github.com/david1x/klinechart/blob/main/src/extension/styles/index.ts"
click node_locale "https://github.com/david1x/klinechart/blob/main/src/extension/i18n/index.ts"
click node_hotkeys "https://github.com/david1x/klinechart/blob/main/src/extension/hotkey/index.ts"
click node_events "https://github.com/david1x/klinechart/blob/main/src/common/EventHandler.ts"
click node_crosshair "https://github.com/david1x/klinechart/blob/main/src/view/CrosshairFeatureView.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_public_api,node_chart,node_options,node_store,node_loader,node_data toneBlue
class node_panes,node_widgets,node_views,node_canvas,node_axes toneAmber
class node_indicators,node_overlays,node_figure_ext,node_styles,node_locale,node_hotkeys toneMint
class node_events,node_crosshair toneRose
class node_host,node_market toneIndigo
```

## Components

### Chart API

- [Public API](https://github.com/david1x/klinechart/blob/main/src/index.ts): `src/index.ts`
- [Chart instance](https://github.com/david1x/klinechart/blob/main/src/Chart.ts): `src/Chart.ts`
- [Chart options](https://github.com/david1x/klinechart/blob/main/src/Options.ts): `src/Options.ts`
- [Chart store](https://github.com/david1x/klinechart/blob/main/src/Store.ts): `src/Store.ts`
- [Data loader](https://github.com/david1x/klinechart/blob/main/src/common/DataLoader.ts): `src/common/DataLoader.ts`
- [Market data](https://github.com/david1x/klinechart/blob/main/src/common/Data.ts): `src/common/Data.ts`

### Chart rendering

- [Chart panes](https://github.com/david1x/klinechart/blob/main/src/pane/Pane.ts): `src/pane/Pane.ts`
- [Pane widgets](https://github.com/david1x/klinechart/blob/main/src/widget/Widget.ts): `src/widget/Widget.ts`
- [Chart views](https://github.com/david1x/klinechart/blob/main/src/view/View.ts): `src/view/View.ts`
- [Canvas figures](https://github.com/david1x/klinechart/blob/main/src/component/Figure.ts): `src/component/Figure.ts`
- [Chart axes](https://github.com/david1x/klinechart/blob/main/src/component/Axis.ts): `src/component/Axis.ts`

### Chart extensions

- [Indicator calculations](https://github.com/david1x/klinechart/blob/main/src/extension/indicator/index.ts): `src/extension/indicator/index.ts`
- [Drawing overlays](https://github.com/david1x/klinechart/blob/main/src/extension/overlay/index.ts): `src/extension/overlay/index.ts`
- [Figure extensions](https://github.com/david1x/klinechart/blob/main/src/extension/figure/index.ts): `src/extension/figure/index.ts`
- [Style themes](https://github.com/david1x/klinechart/blob/main/src/extension/styles/index.ts): `src/extension/styles/index.ts`
- [Locales](https://github.com/david1x/klinechart/blob/main/src/extension/i18n/index.ts): `src/extension/i18n/index.ts`
- [Hotkey extensions](https://github.com/david1x/klinechart/blob/main/src/extension/hotkey/index.ts): `src/extension/hotkey/index.ts`

### Interaction

- [Pointer events](https://github.com/david1x/klinechart/blob/main/src/common/EventHandler.ts): `src/common/EventHandler.ts`
- [Crosshair feature](https://github.com/david1x/klinechart/blob/main/src/view/CrosshairFeatureView.ts): `src/view/CrosshairFeatureView.ts`

### Other components

- **Host application**
- **Market data source**

## Connections

- 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