# Financial Overlays in FinancialChart

Learn how to add Financial Overlays 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.

Overlays, like technical indicators, are a set of derived data that is calculated by applying one or more formulas to the original set of data. Overlays are generally used to forecast an asset's market direction and generally plotted with the original data set since the the Y-axis scales are the same. 

FinancialChart supports two analytical overlays: __Bollinger Bands®__ and __Envelopes__. For generic overlays, such as text annotations, see the Advanced Concepts/Annotations topic.

The analytical overlays extend the regular __Series__ class to provide a calculated series based on the data and parameters you select.

To add analytical overlays to a chart, follow these steps:
1. Create one or more overlay objects (bands or envelopes),
2. Configure the indicator as you would a regular series, setting their __binding__, __bindingX__, and __style__ properties for example, and
3. Set the overlay's __period__ or __size__ properties to determine the parameters for the calculation. Some overlays have more than one parameter.

## Bollinger Bands
A Bollinger Band is a set of lines plotted two standard deviations (positively and negatively) away from a simple moving average of the price. Bollinger Bands is a registered trademark of John Bollinger.

Example:

```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';
myFinancialChart.chartType = 'Candlestick';

// create candlestick data series
var series1 = new chart.Series();
series1.binding = 'high,low,open,close';
myFinancialChart.series.push(series1);

// create Bollinger bands
var bb = new fChartAnalytics.BollingerBands();
bb.binding = 'close';
bb.style = { stroke: 'yellow', strokeWidth: 2 };
bb.name = 'Bollinger Bands'; // name in legend
bb.period = 20;
bb.multiplier = 2;
bb.visibility = 'Visible';
myFinancialChart.series.push(bb);
```
![Bollinger Bands](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-bollinger-bands.png)
## Envelopes
Moving average envelopes are moving averages set above and below a standard moving average. The amount above/below the standard moving average is percentage based and dictated by the __size__ property. The type of moving average is dictated by the __type__ property.

Supported moving average types:
* __Simple__: An average of the last n values.
* __Weighted__: Weighted average of the last n values, where the weight decreases by 1 with each previous value.
* __Exponential__: Weighted average of the last n values, where the weight decreases exponentially with each previous value.
* __Triangular__: Weighted average of the last n values, whose result is equivalent to a double smoothed simple moving average.

Example:

```JavaScript
var myFinancialChart = new fChart.FinancialChart('#myFinancialChart');
myFinancialChart.bindingX = 'date';
myFinancialChart.chartType = 'Candlestick';

// create candlestick data series
var series1 = new chart.Series();
series1.binding = 'high,low,open,close';
myFinancialChart.series.push(series1);

// create Bollinger bands
var env = new fChartAnalytics.Envelopes();
env.binding = 'close';
env.style = { stroke: 'yellow', strokeWidth: 2 };
env.name = 'Envelopes'; // name in legend
env.type = 'Simple';
env.period = 20;
env.size = 0.3;
env.visibility = 'Visible';
myFinancialChart.series.push(env);
```
![Envelopes](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-envelopes.png)