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:

(
  indicator: IndicatorDefinition = {
    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<Timestamp, unknown> | Promise<Record<Timestamp, 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
  } 
) => 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.