Indicator control

This page is a work in progress. Please bear with us while we're working on this content.

Indicator control allows selecting and adding automatic technical indicators to the chart.

Main series

Most of the indicators will require stock chart to have its main series set. Some will need volume series to be set, too.

Value series

Indicators do not have their data set, but rather derive it from the "main series". It's the series, that will feed values to all indicators.

It can be any series, but it needs to have its highValueYField, lowValueYField, and closeValueYField set in addition to valueYField.

It also need to be assigned to chart's stockSeries:

let valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
  name: "MSFT",
  valueXField: "Date",
  valueYField: "Close",
  highValueYField: "High",
  lowValueYField: "Low",
  openValueYField: "Open",
  calculateAggregates: true,
  xAxis: dateAxis,
  yAxis: valueAxis,
  legendValueText: "{valueY}"
}));

stockChart.set("stockSeries", valueSeries);

var valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
  name: "MSFT",
  valueXField: "Date",
  valueYField: "Close",
  highValueYField: "High",
  lowValueYField: "Low",
  openValueYField: "Open",
  calculateAggregates: true,
  xAxis: dateAxis,
  yAxis: valueAxis,
  legendValueText: "{valueY}"
}));


stockChart.set("stockSeries", valueSeries);

Volume series

Some indicators will require "main volume series" to grab values from.

Contrary to value series, it only needs valueYField set.

We assign it to chart's volumeSeries:

stockChart.set("volumeSeries", volumeSeries);

stockChart.set("volumeSeries", volumeSeries);

If we don't actually need it displayed, we can hide it using forceHidden: true setting:

let volumeValueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
  forceHidden: true,
  renderer: am5xy.AxisRendererY.new(root, {})
}));

volumeValueAxis.get("renderer").grid.template.set("forceHidden", true);
volumeValueAxis.get("renderer").labels.template.set("forceHidden", true);

let volumeSeries = mainPanel.series.push(am5xy.ColumnSeries.new(root, {
  valueXField: "Date",
  valueYField: "Volume",
  xAxis: dateAxis,
  yAxis: volumeValueAxis,
  forceHidden: true
}));

stockChart.set("volumeSeries", volumeSeries);

var volumeValueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
  forceHidden: true,
  renderer: am5xy.AxisRendererY.new(root, {})
}));


volumeValueAxis.get("renderer").grid.template.set("forceHidden", true);
volumeValueAxis.get("renderer").labels.template.set("forceHidden", true);

var volumeSeries = mainPanel.series.push(am5xy.ColumnSeries.new(root, {
  valueXField: "Date",
  valueYField: "Volume",
  xAxis: dateAxis,
  yAxis: volumeValueAxis,
  forceHidden: true
}));

stockChart.set("volumeSeries", volumeSeries);

Adding

Like any other control, it should be instantiated using new() syntax, and pushed into toolbar's controls list:

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
    })
  ]
});

See the Pen
Stock chart controls by amCharts team (@amcharts)
on CodePen.0

Configuring

Indicator list

Please refer to "Creating custom indicators for a Stock Chart" tutorial for the information.