Skip to main content

​
Overview

Indicators are analytical tools that help visualize trends, momentum, volatility, and other market characteristics. amCharts 5 Stock provides a comprehensive set of built-in technical indicators.

​
Base Classes

​
Indicator

Base class for all stock chart indicators. 
import { Indicator } from "@amcharts/amcharts5/stock";

​
Settings

​
stockChart
StockChart
required
Instance of the target StockChart.
​
stockSeries
XYSeries
required
Main series the indicator is based on.
​
volumeSeries
XYSeries
Volume series the indicator uses, if required.
​
legend
StockLegend
If set, the indicator will add itself to this legend.
​
period
number
Period for calculations (e.g., number of data points to consider).
​
field
string
Value field to use for calculations.Options: "open", "close", "low", "high", "hl/2", "hlc/3", "hlcc/4", "ohlc/4"
​
name
string
Indicator name (e.g., “Moving Average”).
​
shortName
string
Short name for the indicator (e.g., “MA”), mainly used in the legend.
​
seriesColor
Color
Color to use for the indicator series.
​
autoOpenSettings
boolean
default:"true"
Whether indicator settings modal should open automatically when the indicator is added via IndicatorControl.

​
Properties

​
series
XYSeries
The indicator’s data series.

​
Methods

prepareData()
Prepares and calculates indicator data. 
prepareData(): void
markDataDirty()
Marks indicator data as dirty, triggering recalculation. 
markDataDirty(): void
hide()
Hides the indicator. 
hide(duration?: number): Promise<any>
​
duration
number
Animation duration in milliseconds.
show()
Shows the indicator. 
show(duration?: number): Promise<any>
​
duration
number
Animation duration in milliseconds.

​
ChartIndicator

Base class for indicators that are displayed in their own panel. 
import { ChartIndicator } from "@amcharts/amcharts5/stock";
Extends Indicator and adds:
​
panel
StockPanel
The panel where the indicator is displayed.
​
xAxis
DateAxis<AxisRenderer>
The indicator’s X axis.
​
yAxis
ValueAxis<AxisRenderer>
The indicator’s Y axis.
​
cursor
XYCursor
The indicator panel’s cursor.
​
legend
StockLegend
The indicator panel’s legend.

​
Built-in Indicators

​
MovingAverage

Calculates various types of moving averages. 
import { MovingAverage } from "@amcharts/amcharts5/stock";

const ma = stockChart.indicators.push(
  MovingAverage.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    period: 50,
    type: "simple",
    seriesColor: am5.color(0x0000ff)
  })
);
​
type
string
default:"simple"
Type of moving average.Options: "simple", "weighted", "exponential", "dema", "tema"
​
offset
number
default:"0"
Number of periods to offset the moving average.

​
BollingerBands

Displays Bollinger Bands with upper, middle, and lower bands. 
import { BollingerBands } from "@amcharts/amcharts5/stock";

const bb = stockChart.indicators.push(
  BollingerBands.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    period: 20,
    standardDeviations: 2
  })
);
​
standardDeviations
number
Number of standard deviations for the bands.
​
upperColor
Color
Color for the upper band.
​
lowerColor
Color
Color for the lower band.
​
upperBandSeries
LineSeries
Series for the upper band.
​
lowerBandSeries
LineSeries
Series for the lower band.

​
MACD

Moving Average Convergence Divergence indicator. 
import { MACD } from "@amcharts/amcharts5/stock";

const macd = stockChart.indicators.push(
  MACD.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    fastPeriod: 12,
    slowPeriod: 26,
    signalPeriod: 9
  })
);
​
fastPeriod
number
Period for the fast moving average.
​
slowPeriod
number
Period for the slow moving average.
​
signalPeriod
number
Period for the signal line.
​
increasingColor
Color
Color for increasing histogram bars.
​
decreasingColor
Color
Color for decreasing histogram bars.
​
signalColor
Color
Color for the signal line.
​
signalSeries
LineSeries
Series for the signal line.
​
differenceSeries
ColumnSeries
Series for the MACD histogram.

​
Other Built-in Indicators

amCharts 5 includes many additional indicators:
  • AccelerationBands - Acceleration Bands indicator
  • AccumulationDistribution - Accumulation/Distribution indicator
  • AccumulativeSwingIndex - Accumulative Swing Index
  • Aroon - Aroon indicator
  • AverageTrueRange - Average True Range (ATR)
  • AwesomeOscillator - Awesome Oscillator
  • BullBearPower - Bull/Bear Power indicator
  • ChaikinMoneyFlow - Chaikin Money Flow
  • ChaikinOscillator - Chaikin Oscillator
  • CommodityChannelIndex - Commodity Channel Index (CCI)
  • DisparityIndex - Disparity Index
  • HeikinAshi - Heikin-Ashi candlesticks
  • MACross - Moving Average Crossover
  • MedianPrice - Median Price indicator
  • Momentum - Momentum indicator
  • MovingAverageDeviation - Moving Average Deviation
  • MovingAverageEnvelope - Moving Average Envelope
  • OnBalanceVolume - On Balance Volume (OBV)
  • OverboughtOversold - Overbought/Oversold indicator
  • PVT - Price Volume Trend
  • RelativeStrengthIndex - Relative Strength Index (RSI)
  • StandardDeviation - Standard Deviation
  • StochasticMomentumIndex - Stochastic Momentum Index
  • StochasticOscillator - Stochastic Oscillator
  • SuperTrend - SuperTrend indicator
  • Trix - Triple Exponential Average
  • TypicalPrice - Typical Price indicator
  • Volume - Volume indicator
  • VolumeProfile - Volume Profile
  • VWAP - Volume Weighted Average Price
  • WilliamsR - Williams %R
  • ZigZag - ZigZag indicator

​
Editable Settings

Indicators can define editable settings that appear in the settings modal: 
export interface IIndicatorEditableSetting {
  key: string;              // Setting key
  name: string;             // Display name
  type: "color" | "number" | "dropdown" | "checkbox" | "text";
  minValue?: number;        // Minimum value for number inputs
  options?: Array<string | { // Options for dropdowns
    value: number | string,
    text: string
  }>;
}

​
Creating Custom Indicators

To create a custom indicator:
  1. Extend Indicator or ChartIndicator
  2. Implement the prepareData() method
  3. Define _editableSettings for user customization
  4. Register the class with registerClass()
import { Indicator, registerClass } from "@amcharts/amcharts5/stock";
import { LineSeries } from "@amcharts/amcharts5/xy";

export class MyIndicator extends Indicator {
  public static className = "MyIndicator";
  public static classNames = Indicator.classNames.concat([MyIndicator.className]);
  
  declare public series: LineSeries;
  
  public _editableSettings = [{
    key: "period",
    name: "Period",
    type: "number" as const
  }];
  
  protected _afterNew() {
    super._afterNew();
    
    const stockSeries = this.get("stockSeries");
    const chart = stockSeries.chart;
    
    if (chart) {
      this.series = chart.series.push(
        LineSeries.new(this._root, {
          valueXField: "valueX",
          valueYField: "myValue",
          xAxis: stockSeries.get("xAxis"),
          yAxis: stockSeries.get("yAxis"),
          groupDataDisabled: true
        })
      );
      
      this._handleLegend(this.series);
    }
  }
  
  public prepareData() {
    if (this.series) {
      const stockSeries = this.get("stockSeries");
      const dataItems = stockSeries.dataItems;
      const period = this.get("period", 14);
      
      // Calculate indicator values
      const data = [];
      for (let i = 0; i < dataItems.length; i++) {
        // Your calculation logic here
        data.push({
          valueX: dataItems[i].get("valueX"),
          myValue: /* calculated value */
        });
      }
      
      this.series.data.setAll(data);
    }
  }
}

// Register for serialization
registerClass("MyIndicator", MyIndicator);

​
Example

import * as am5 from "@amcharts/amcharts5";
import * as am5stock from "@amcharts/amcharts5/stock";
import * as am5xy from "@amcharts/amcharts5/xy";

const root = am5.Root.new("chartdiv");

// Create chart and series (see StockChart example)

// Add Moving Average
const sma = stockChart.indicators.push(
  am5stock.MovingAverage.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    period: 20,
    type: "simple",
    seriesColor: am5.color(0xff6600)
  })
);

// Add Bollinger Bands
const bb = stockChart.indicators.push(
  am5stock.BollingerBands.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    period: 20,
    standardDeviations: 2,
    upperColor: am5.color(0x00ff00),
    lowerColor: am5.color(0xff0000)
  })
);

// Add MACD in separate panel
const macd = stockChart.indicators.push(
  am5stock.MACD.new(root, {
    stockChart: stockChart,
    stockSeries: valueSeries,
    fastPeriod: 12,
    slowPeriod: 26,
    signalPeriod: 9
  })
);

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us