Indicators

Stock chart comes with a selection of automatic indicators that can be added to the chart via toolbar or API.

To enable adding of indicators via UI, we need to add indicator control to our stock toolbar:

TypeScript
JavaScript

let toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.IndicatorControl.new(root, {
      stockChart: stockChart
    })
  ]
});

var toolbar = am5stock.StockToolbar.new(root, {
  container: document.getElementById("chartcontrols"),
  stockChart: stockChart,
  controls: [
    am5stock.IndicatorControl.new(root, {
      stockChart: stockChart
    })
  ]
});

Open in CodePen

Adding via API

Creating indicator

Indicators can be added by instantiating an appropriate class, then pushing it into chart’s indicators list.

Each indicator will need its stockChart (target stock chart) and stockSeries (value series) set, at the very least.

Some indicators, such as Volume, will need volumeSeries set as well, as they rely on both value and volume data.

TypeScript
JavaScript

stockChart.indicators.push(am5stock.BollingerBands.new(root, {
  stockChart: stockChart,
  stockSeries: valueSeries,
  legend: valueLegend,
  type: "simple"
}));

stockChart.indicators.push(am5stock.BollingerBands.new(root, {
  stockChart: stockChart,
  stockSeries: valueSeries,
  legend: valueLegend,
  type: "simple"
}));

Configuring

[todo]

Available indicators

Refer to the links next to each indicator for settings reference.

Indicator	Needs `stockSeries`	Needs `volumeSeries`
`AccumulationDistribution`	Yes	Optional	Settings
`AccumulativeSwingIndex`	Yes		Settings
`Aroon`	Yes		Settings
`AwesomeOscillator`	Yes		Settings
`BollingerBands`	Yes		Settings
`ChaikinMoneyFlow`	Yes	Yes	Settings
`ChaikinOscillator`	Yes	Yes	Settings
`CommodityChannelIndex`	Yes		Settings
`DisparityIndex`	Yes		Settings
`MACD`	Yes		Settings
`MedianPrice`	Yes		Settings
`MovingAverage`	Yes		Settings
`MovingAverageCross`	Yes		Settings
`MovingAverageDeviation`	Yes		Settings
`MovingAverageEnvelope`	Yes		Settings
`OnBalanceVolume`	Yes	Yes	Settings
`PVT` (Price Volume Trend)	Yes	Yes	Settings
`RelativeStrengthIndex`	Yes		Settings
`StandardDeviation`	Yes		Settings
`StochasticOscillator`	Yes		Settings
`Trix`	Yes		Settings
`TypicalPrice`	Yes		Settings
`Volume`	Yes	Yes	Settings
`VolumeProfile`	Yes	Yes	Settings
`VWAP`	Yes	Yes	Settings
`WilliamsR`	Yes		Settings
`ZigZag`	Yes		Settings

Creating custom indicators

Refer to “Creating custom indicators for a Stock Chart” tutorial.

Stock Chart with custom indicator add button