Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

Technical Indicators

Overview

A technical indicator is a type of analysis chart that indicates market direction. Indicators are mathematical calculation based on historic price, volume, or (in the case of futures contracts) open interest, used to indicate where the price is going, or whether the price is in an "overbought" condition or an "oversold" condition.

AnyChart JavaScript Stock Chart Component supports automatic building of several types of technical indicators. Technical indicators are based on data from data providers and do not depend on series.

This document lists available indicator types and gives directions to the tutorials about each indicator type and general information about technical indicators in AnyChart Stock Component.

Adding indicators

To understand how technical indicator gets data and what it depends on please study Data article first, because any indicator is based on a data set and can't exist without it. It doesn't depend on any Series you've added on the plot directly, but to make any sense indicators need to be based on the data that correlates to series displayed on a chart.

Let's now add one of the most common and basic indicators to a chart (we will take one from Quick Start article as a basis). To add Simple Moving Average (SMA) indicator to the first (and only in this case) plot you just need to add the following line when chart and mapping are ready:

chart.plot(0).sma(mapping, 10, "line");

Full code goes as follows:

anychart.onDocumentReady(function() {
var table, mapping, chart;

table = anychart.data.table();
table.addData([
['2015-12-24T12:00:00','511.53', '514.98', '505.79', '506.40'],
['2015-12-25T12:00:00','512.53', '514.88', '505.69', '507.34'],
['2015-12-26T12:00:00','511.83', '514.98', '505.59', '506.23'],
['2015-12-27T12:00:00','511.22', '515.30', '505.49', '506.47'],
['2015-12-28T12:00:00','510.35', '515.72', '505.23', '505.80'],
['2015-12-29T12:00:00','510.53', '515.86', '505.38', '508.25'],
['2015-12-30T12:00:00','511.43', '515.98', '505.66', '507.45'],
['2015-12-31T12:00:00','511.50', '515.33', '505.99', '507.98'],
['2016-01-01T12:00:00','511.32', '514.29', '505.99', '506.37'],
['2016-01-02T12:00:00','511.70', '514.87', '506.18', '506.75'],
['2016-01-03T12:00:00','512.30', '514.78', '505.87', '508.67'],
['2016-01-04T12:00:00','512.50', '514.77', '505.83', '508.35'],
['2016-01-05T12:00:00','511.53', '516.18', '505.91', '509.42'],
['2016-01-06T12:00:00','511.13', '516.01', '506.00', '509.26'],
['2016-01-07T12:00:00','510.93', '516.07', '506.00', '510.99'],
['2016-01-08T12:00:00','510.88', '515.93', '505.22', '509.95'],
['2016-01-09T12:00:00','509.12', '515.97', '505.15', '510.12'],
['2016-01-10T12:00:00','508.53', '516.13', '505.66', '510.42'],
['2016-01-11T12:00:00','508.90', '516.24', '505.73', '510.40']	
]);
  
// mapping the data  
mapping = table.mapAs();
mapping.addField('open', 1, 'first');
mapping.addField('high', 2, 'max');
mapping.addField('low', 3, 'min');
mapping.addField('close', 4, 'last');
mapping.addField('value', 4, 'last');

// defining the chart type
chart = anychart.stock();
	  
// set the series type
chart.plot(0).ohlc(mapping).name('ACME Corp.');

// add sma indicator
chart.plot(0).sma(mapping, 10, "line");

// setting the chart title
chart.title('AnyStock Basic Sample with SMA indicator');
	  
chart.container('container');
chart.draw();
});

And here is a live sample:

JsFiddle Playground

It is that simple! One line that invokes sma() method with correct parameters: mapping of dataset with correct fields, indicator parameters (period in case of SMA), type of the series you want indicator to be displayed as, and here it is - shown on the chart and automatically recalculated when needed.

Supported Types

AnyStock supports several technical indicators out of the box, to see full list and navigate to the articles that describe them in details please see Supported Technical Indicators article.

Custom Indicators

A unique feature that distinguishes AnyStock JavaScript Stock Chart among other solutions is the ability to create your own indicators, we provide an API to do that and you can use it to add known indicators that are not in the supported set yet or your own proprietary indicators. Please see Custom Indicators to learn more.

Mathematical Description

Mathematical formulas we use to calculate all out of the box technical indicators can be found in Mathematical Description article.