Documentation
Topics
Chart
Features
Analytics
Financial Indicators
5.20231.904
5.20231.904

Financial Indicators in FinancialChart

The wijmo.chart.finance.analytics module contains the analytical extensions for FinancialChart including technical indicators, overlays and Fibonacci tools.

A technical indicator is a set of derived data that is calculated by applying one or more formulas to the original set of data. Technical indicators are generally used to forecast the asset's market direction and generally plotted separately from the original data since the Y-axis scales differ.

Supported indicator types:

  • Average True Range (ATR): Used to measure the volatility of an asset. Average true range does not provide any indication of the price's trend, but rather the degree of price volatility.
  • Relative Strength Index (RSI): A momentum oscillator designed to measure the current and historical strength or weakness of an asset based on the closing prices of a recent trading period.
  • Commodity Channel Index (CCI): An oscillator that measures an asset's current price level relative to an average price level over a specified period of time.
  • Williams %R: A momentum indicator that is the inverse of a fast stochastic oscillator (Stochastic). The Williams %R indicator is designed to tell whether an asset is trading near the high or low of its trading range.
  • Moving Average Convergence/Divergence (MACD): The MACD indicator is designed to reveal changes in strength, direction, momentum, and duration of an asset's price trend.
  • Moving Average Convergence/Divergence Histogram
  • Stochastic: Stochastic oscillators are momentum indicators designed to predict price turning points by comparing an asset's closing price to its high-low range.

How to Add a Technical Indicator

The technical indicators extend the regular Series class to provide a calculated series based on the data and parameters you select.

To add trend lines to a chart, follow these steps:

  1. Create one or more indicator objects,
  2. Configure the indicator as you would a regular series, setting their binding, bindingX, and style properties for example, and
  3. Set the indicator's period properties to determine the period(s) for the calculation. Some indicator types have more than one period parameter.

Average True Range Example

The ATR indicator expects high, low, open, and close binding values. Typically, the Average True Range is based on 14 periods and can be calculated on an intraday, daily, weekly or monthly basis. 

import * as chart from '@grapecity/wijmo.chart';
import * as fChart from '@grapecity/wijmo.chart.finance';
import * as fChartAnalytics from '@grapecity/wijmo.chart.finance.analytics';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';

// create ATR indicator and add it to the Chart series collection
var atr = new fChartAnalytics.ATR();
atr.binding = 'high,low,open,close';
atr.style = { stroke: 'green', strokeWidth: 2 };
atr.name = 'Average True Range'; // name in legend
atr.period = 14;
atr.visibility = 'Visible';
myFinancialChart.series.push(atr);

Relative Strength Index Example

The RSI indicator expects a single value binding. The period property represents the smoothing period. The recommended smoothing period is 14.

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';

// create RSI indicator and add it to the Chart series collection
var rsi = new fChartAnalytics.RSI();
rsi.binding = 'close';
rsi.style = { stroke: 'green', strokeWidth: 2 };
rsi.name = 'Relative Strength Index'; // name in legend
rsi.period = 14;
rsi.visibility = 'Visible';
myFinancialChart.series.push(rsi);

Commodity Channel Index Example

The CCI indicator expects high, low, open, and close binding values.

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';

// create CCI indicator and add it to the Chart series collection
var cci = new fChartAnalytics.CCI();
cci.binding = 'high,low,open,close';
cci.style = { stroke: 'green', strokeWidth: 2 };
cci.name = 'Commodity Channel Index'; // name in legend
cci.period = 20;
cci.visibility = 'Visible';
myFinancialChart.series.push(cci);

Williams %R Example

The WilliamsR indicator expects high, low, open, and close binding values. The recommended period for Williams %R is 14 periods, which can be days, weeks, months or an intraday timeframe.

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';

// create Williams%R indicator and add it to the Chart series collection
var williamsR = new fChartAnalytics.WilliamsR();
williamsR.binding = 'high,low,open,close';
williamsR.style = { stroke: 'green', strokeWidth: 2 };
williamsR.name = 'Williams %R'; // name in legend
williamsR.period = 14;
williamsR.visibility = 'Visible';
myFinancialChart.series.push(williamsR);

MACD & MACD Histogram Example

The Macd and MacdHistogram indicator expects a single value binding. The moving average convergence/divergence indicator uses three periods: slow, fast and signal smoothing. The default settings used for the MACD are a 26-period Slow EMA (exponential moving average) and a 12-period Fast EMA. The signal line is usually set at 9-period indicators’ moving average.

This example also adds a MacdHistogram indicator.

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';

// create MACD indicator and add it to the Chart series collection
var mac = new fChartAnalytics.Macd();
mac.binding = 'close';
mac.style = { stroke: 'green', strokeWidth: 2 };
mac.name = 'MACD, Signal'; // name in legend
mac.smoothingPeriod = 9;
mac.fastPeriod = 12;
mac.slowPeriod = 26;
mac.visibility = 'Visible';
myFinancialChart.series.push(mac);

// create MACD histogram and add it to the Chart series collection
var mach = new fChartAnalytics.MacdHistogram();
mach.binding = 'close';
mach.style = { stroke: 'purple', strokeWidth: 2 };
mach.name = 'MACD Histogram'; // name in legend
mach.smoothingPeriod = 9;
mach.fastPeriod = 12;
mach.slowPeriod = 26;
mach.visibility = 'Visible';
myFinancialChart.series.push(mach);

Stochastic Example

The Stochastic indicator expects high, low, open, and close binding values. The stochastic indicator uses three periods: K Period, D Period, and Smoothing Period.

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';

// create Williams%R indicator and add it to the Chart series collection
var stoch = new fChartAnalytics.Stochastic();
stoch.binding = 'high,low,open,close';
stoch.style = { stroke: 'green', strokeWidth: 2 };
stoch.name = '%K,%D'; // name in legend
stoch.dPeriod = 3;
stoch.kPeriod = 14;
stoch.smoothingPeriod = 1;
stoch.visibility = 'Visible';
myFinancialChart.series.push(stoch);

Indicator Display Options

You can choose whether or not the indicator displays an entry in the legend by setting the visibility property to one of the following:

  • Visible: The series is visible on the plot and in the legend.

  • Plot: The series is visible only on the plot.

  • Legend: The series is visible only in the legend.

  • Hidden: The series is hidden.

    The legend text is set using the name property of the indicator series.