# Financial Indicators in FinancialChart Learn how to add Financial Indicators to Wijmo's FinancialChart component in this documentation topic ## Content 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. ```JavaScript import * as chart from '@mescius/wijmo.chart'; import * as fChart from '@mescius/wijmo.chart.finance'; import * as fChartAnalytics from '@mescius/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. ```JavaScript 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. ```JavaScript 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. ```JavaScript 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. ```JavaScript 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. ```JavaScript 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.