Technical Indicators

ChartSpire provides a comprehensive suite of technical indicators for advanced market analysis. This guide will help you understand how to use and customize the indicator system.

Main vs. Sub Indicators

ChartSpire indicators are categorized into two types:

1. Main Indicators: These are overlaid directly on the price chart (candlesticks/bars) and share the same price scale. Examples include Moving Averages, Bollinger Bands, and Ichimoku Cloud.

2. Sub Indicators: These are displayed in separate panels below the main price chart, typically with their own scale. Examples include RSI, MACD, and Volume.

Available Indicators

ChartSpire offers 80+ indicators

Adding indicators via API

You can add indicators programmatically when creating the chart:

import { ChartSpire } from 'chartspire'

const chart = new ChartSpire({
  container: document.getElementById('chart-container'),
  // Other options...
  indicators: ['RSI', 'MACD']
})

Configuring Indicator Parameters

Each indicator in ChartSpire has configurable parameters that affect its calculation and display.

Via User Interface

1. To configure an existing indicator:

   • Hover over the indicator in the chart or in a sub-panel
   • Click on the settings icon (gear) in the indicator tooltip
   • Adjust parameters in the configuration modal that appears
   • Click "Apply" to update the indicator with new parameters

2. Common parameter types include:

   • Periods/lengths (e.g., SMA length, RSI period)
   • Source data (close, open, high, low, hl2, hlc3, ohlc4)
   • Calculation methods
   • Visual options (line styles, colors)

Custom Indicator Styling

Via User Interface

1. To customize indicator styling:
   • Access the indicator settings as described above
   • Navigate to the "Style" tab in the configuration modal
   • Adjust colors, line styles, thickness, and other visual properties
   • Click "Apply" to update the indicator appearance

Creating Custom Indicators

ChartSpire allows for creating and registering custom indicators:

import { IndicatorDefinition } from "chartspire";

// Define a custom indicator
const testIndicator: IndicatorDefinition<any> = {
    isMainIndicator: false,
    isSubIndicator: true,
    parameters: [],
    name: 'testIndicator',
    shortName: 'testIndicator',
    figures: [{
      key: 'close',
      title: 'close: ',
      type: 'line'
    }],
    calc: dataList => dataList.map(data => ({ close: data.close }))
}

export default testIndicator

Once you have defined your custom indicator, you can register it using the createIndicator function:

import { createIndicator } from 'chartspire'
import testIndicator from './test-indicator'

// Register the custom indicator
createIndicator(testIndicator)

This simple example creates a sub-indicator that displays the closing price as a line. You can create more complex indicators by:

• Using different calculation methods in the calc function
• Adding multiple figures with different visualization types
• Configuring parameters that can be adjusted by users

Indicator definition

The indicator properties are of type IndicatorDefinition:

interface IndicatorDefinition<T = unknown> {
  isMainIndicator: boolean
  isSubIndicator: boolean
  name: string
  parameters: IndicatorParameters
  shortName?: string
  precision?: number
  calcParams?: unknown[]
  shouldOhlc?: boolean
  shouldFormatBigNumber?: boolean
  visible?: boolean
  zLevel?: number
  extendData?: unknown
  series?: 'normal' | 'price' | 'volume'
  figures?: Array<{
    key: string
    title?: string
    type?: string
    baseValue?: number
    attrs?: (params: object) => object
    styles?: (params: object) => object
  }>
  minValue?: number
  maxValue?: number
  styles?: Partial<IndicatorStyle>
  shouldUpdate?: (prev: Indicator, current: Indicator) => boolean | { calc: boolean; draw: boolean }
  calc: (candleStickData: CandleStickData[], indicator: Indicator) => Record<string, unknown> | Promise<Record<string, unknown>>
  regenerateFigures?: (calcParams: unknown[]) => Array<{
    key: string
    title?: string
    type?: string
    baseValue?: number
    attrs?: (params: object) => object
    styles?: (params: object) => object
  }>
  createTooltipDataSource?: (params: object) => {
    name?: string
    calcParamsText?: string
    features?: Array<{
      id?: string
      position?: 'left' | 'middle' | 'right'
      marginLeft?: number
      marginTop?: number
      marginRight?: number
      marginBottom?: number
      paddingLeft?: number
      paddingTop?: number
      paddingRight?: number
      paddingBottom?: number
      size?: number
      color?: string
      activeColor?: string
      backgroundColor?: string
      activeBackgroundColor?: string
      type?: 'path' | 'icon_font'
      path?: {
        style?: 'stroke' | 'fill'
        path?: string
        lineWidth?: number
      }
      iconFont?: {
        content?: string
        family?: string
      }
    }>
    legends?: Array<{
      title: string | { text: string; color: string }
      value: string | { text: string; color: string }
    }>
  }
  draw?: (params: object) => boolean
  onDataStateChange?: (params: object) => void
}

Parameters

• indicator Indicator configuration.
  • name Name, a unique identifier used for creation or modification.
  • shortName A short name, used for prompt display.
  • precision Precision.
  • calcParams Calculate the parameters.
  • shouldOhlc Whether to show the ohlc bar.
  • shouldFormatBigNumber Whether big numbers need to be formatted and displayed.
  • visible Whether it is visible.
  • zLevel Hierarchy only works between indicators.
  • extendData Custom the extended data.
  • series Series, supports normal , price and volume , when price and precision is not set, the precision will follow the price precision, when volume and precision is not set, the precision will follow the volume precision.
  • figures Figure configuration, an array of items containing object configuration.
    • key The identifier of the data value, corresponding to the key of the data sub-item returned by calc.
    • type The type of figure that supports the type returned by candleStickData.getSupportedFigures .
    • baseValue The basic control value, currently only works when type is rect and bar . When this value is valid, the graphics will be drawn up and down based on this value.
    • attrs The property value is a method, and the return value is the required property of the object obtained by candleStickData.getFigureClass .
    • styles Style is a method that returns the style required by the object obtained by candleStickData.getFigureClass .
  • minValue Specify a minimum value.
  • maxValue Specifies the maximum value.
  • styles Style configuration, the type is the same as indicator in the general style Styles.
  • shouldUpdate Control whether updates are needed.
  • calc Calculation method.
  • regenerateFigures Regenerates the basic graphics configuration. This is triggered when calcParams changes. The return value type is the same as figures .
  • createTooltipDataSource Create custom prompts.
  • draw Custom drawing method, if the return value is true, it will override the default drawing.
  • onDataStateChange Data change callback notification.