Adding Custom Indicators

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/klinechart/types/TechnicalIndicator.d.ts
• frontend/src/klinechart/src/Chart.js
• frontend/src/pages/chart/indicatorsTemplates/pmax.ts
• frontend/src/pages/chart/indicatorsTemplates/vwap.ts
• frontend/src/pages/chart/components/Indicators.tsx
• frontend/src/klinechart/src/store/extension.js
• frontend/src/pages/chart/index.tsx

Adding custom indicators to the technical analysis platform involves defining a TechnicalIndicatorTemplate and registering it with the KLineChart engine. This allows developers to extend the library's built-in indicators (like MA, EMA, or MACD) with specialized logic, custom rendering, and external calculation sources such as Web Workers or Python-based APIs.

Sources: frontend/src/klinechart/types/TechnicalIndicator.d.ts, frontend/src/pages/chart/components/Indicators.tsx:28-193

Indicator Template Architecture

A custom indicator is defined by a template object that implements the TechnicalIndicatorTemplate interface. This template controls how the indicator calculates its data, how it is plotted on the chart (e.g., lines or bars), and how its tooltip information is displayed.

TechnicalIndicatorTemplate Structure

The template consists of several key properties:

Property	Type	Description
name	string	The unique identifier for the indicator.
series	TechnicalIndicatorSeries	Defines where the indicator is plotted: 'price', 'volume', or 'normal'.
calcParams	any[]	Default parameters used for calculations.
plots	TechnicalIndicatorPlot[]	Defines the graphical output (lines, bars, circles) for each calculated value.
calcTechnicalIndicator	Function	The core logic that returns indicator values based on K-line data.

Sources: frontend/src/klinechart/types/TechnicalIndicator.d.ts:57-70

Plot Configuration

Each plot item within the plots array defines how a specific key in the calculation result is visualised.

{
  key: "rsi",
  title: "RSI",
  type: "line",
  color: (data) => data.current?.technicalIndicatorData?.rsi > 70 ? 'red' : 'blue'
}

Sources: frontend/src/klinechart/types/TechnicalIndicator.d.ts:25-33

Data Calculation Strategies

The system supports multiple strategies for calculating technical indicators, ranging from synchronous local calculations to asynchronous remote processing.

1. Web Worker Integration

For complex indicators like PMax or Williams VIX, calculations are offloaded to Web Workers to prevent UI blocking. The calcTechnicalIndicator function sends K-line data to the worker and returns a Promise that resolves when the worker sends back the results.

Sources: frontend/src/pages/chart/indicatorsTemplates/pmax.ts:33-46, frontend/src/pages/chart/indicatorsTemplates/williamsVix.ts:38-55

2. Remote API Calculation

Indicators like VWAP utilize a remote Python-based calculator. This is achieved by making a POST request to an external service within the template's calculation function.

Sources: frontend/src/pages/chart/indicatorsTemplates/vwap.ts:14-30

3. Custom Canvas Rendering

Advanced indicators can override the default plotting logic by providing a render function. This provides direct access to the CanvasRenderingContext2D, allowing for custom shapes or complex visual overlays.

Sources: frontend/src/klinechart/types/TechnicalIndicator.d.ts:53-55, frontend/src/klinechart/tests/technical-indicator-template2.html:56-78

Calculation Data Flow

The following diagram illustrates how data flows from the chart store to the calculation engine and back to the UI.

Registration and Implementation

Once a template is defined, it must be added to the chart instance using addTechnicalIndicatorTemplate.

Adding Templates to the Chart

The Chart.js class provides the addTechnicalIndicatorTemplate method which pushes the custom template into the technical indicator store.

// From Chart.js
addTechnicalIndicatorTemplate (template) {
  const templates = [].concat(template)
  this._chartPane.chartStore().technicalIndicatorStore().addTemplate(templates)
}

Sources: frontend/src/klinechart/src/Chart.js:275-281

In the application initialization, multiple custom templates are registered simultaneously:

// From frontend/src/pages/chart/index.tsx
instance?.addTechnicalIndicatorTemplate([
  williamsVixIndicatorTemplate,
  pmaxIndicatorTemplate,
  ottIndicatorTemplate,
  rsiStochTPIndicatorTemplate,
  pmaxRsiIndicatorTemplate,
  vwapIndicatorTemplate,
  volumeIndicatorTemplate,
]);

Sources: frontend/src/pages/chart/index.tsx:117-125

UI Integration

The Indicators.tsx component manages the user-facing list of available indicators. It distinguishes between standard built-in indicators and custom implementations.

Dynamic Indicators

Templates can also define a regeneratePlots function. This allows the indicator to dynamically change its plots (e.g., adding more lines) when a user modifies the calcParams.

Sources: frontend/src/pages/chart/indicatorsTemplates/pmax.ts:26-30, frontend/src/klinechart/types/TechnicalIndicator.d.ts:66

Summary

Adding custom indicators is a structured process of defining a metadata template that specifies plotting logic, calculation methods (often asynchronous via workers or APIs), and registration with the chart's extension system. This modular approach ensures that the charting engine remains lightweight while allowing for complex financial analysis tools to be integrated seamlessly.