# Financial Charts

Learn how to create financial charts using Wijmo's FinancialChart component in this documentation topic

## Content


The __wijmo.chart.finance.FinancialChart__ control supports various chart types to allow customization. Set the __chartType__ property to change the type.

The following basic chart types are supported (common to FlexChart and FinancialChart):

* Column
* Scatter
* Line
* LineSymbols
* Area
* Candlestick
* HighLowOpenClose

The following advanced financial chart types are supported:

* HeikinAshi
* LineBreak
* Renko
* Kagi
* ColumnVolume
* EquiVolume
* CandleVolume
* ArmsCandleVolume
* PointAndFigure

How to set the FinancialChart chart type:

```JavaScript
import * as chart from '@mescius/wijmo.chart';
import * as fChart from '@mescius/wijmo.chart.finance';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'HeikinAshi',
    series: [
        { binding: 'high,low,open,close' }
    ]
});
```

## Heikin-Ashi

Heikin-Ashi charts are a variation of Japanese candlestick charts that were designed to remove noise from candlesticks and behave much like a moving average. These charts can be used to identify trends, potential reversal points, and other technical analysis patterns. 

While the appearance of Heikin-Ashi charts are identical to candlestick charts, the underlying price values are calculated based on the following formulas:

* __haHigh__ Max(high[0], haOpen[0], haClose[0])
* __haLow__ Min(low[0], haOpen[0], haClose[0])
* __haOpen__ Avg(haOpen[-1], haClose[-1])
* __haClose__ Avg(high[0], low[0], open[0], close[0])

"-1" indicates the previous period; "0" indicates the current period.

These charts cannot be combined with any other series objects. The data for this chart type can be defined using the __FinancialChart__ or __FinancialSeries__ binding property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".

![Heikin-Ashi Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-heikin-ashi.png)

## Line Break

A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market. Movements are depicted with box colors and styles; movements that continue the trend of the previous box are colored similarly while movements that trend oppositely are indicated with a different color and/or style. The opposite trend is only drawn if its value exceeds the extreme value of the previous n number of boxes or lines, which is determined by the newLineBreaks option. 

The data for this chart type can be defined using the __FinancialChart__ or __FinancialSeries__ binding property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".

### Setting the Number of Line Breaks

The __options.lineBreak.newLineBreaks__ sets the number of previous boxes that must be compared before a new box is drawn in Line Break charts. The default value is 3.

Example:

```JavaScript
myFinancialChart.options = {
  lineBreak: { newLineBreaks: 3 }
}
```

### Styling the Line Break Chart

The Line Break chart type uses the __altStyle__ to fill the rising values. The common __style__ property (shared with all chart types) fills the falling values.

Example:

```JavaScript
myFinancialChart.series[0].style = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'rgba(136, 189, 230, 0.701961)'
};

myFinancialChart.series[0].altStyle = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'transparent'
};
```

![Line Break Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-line-break.png)

# Renko

The Renko chart uses bricks of uniform size to chart the price movement. When a price moves to a greater or lesser value than the preset boxSize option required to draw a new brick, a new brick is drawn in the succeeding column. The change in box color and direction signifies a trend reversal.

The data for this chart type can be defined using the __FinancialChart__ or __FinancialSeries__ binding property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".

### Renko Options

Set the following settings for Renko charts in the __options__.

* __renko.fields__: Specifies the __DataFields__ used for the Renko chart. The default value is DataFields.Close.
* __renko.rangeMode__: Specifies the __RangeMode__ for the Renko chart. The default value is RangeMode.Fixed. Other options include ATR and Percentage.
* __renko.boxSize__: Specifies the box size for the Renko chart. The default value is 14.

Example:

```JavaScript
myFinancialChart.options = {
  renko: {
     fields: wijmo.chart.finance.DataFields.Close,
     rangeMode: wijmo.chart.finance.RangeMode.Fixed,
     boxSize: 14
  }
}
```

### Styling the Renko Chart

The Renko chart type uses the __altStyle__ to fill the rising values. The common __style__ property (shared with all chart types) fills the falling values.

Example:

```JavaScript
myFinancialChart.series[0].style = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'rgba(136, 189, 230, 0.701961)'
};

myFinancialChart.series[0].altStyle = {
    stroke: 'rgb(136, 189, 230)',
    fill: 'transparent'
};
```

![Renko Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-renko.png)

# Kagi

A Kagi chart displays supply and demand trends using a sequence of linked vertical lines. The thickness and direction of the lines vary depending on the price movement. If closing prices go in the direction of the previous Kagi line, then that Kagi line is extended. However, if the closing price reverses by the preset reversal amount, a new Kagi line is charted in the next column in the opposite direction. Thin lines indicate that the price breaks the previous low (supply) while thick lines indicate that the price breaks the previous high (demand).

The data for this chart type can be defined using the __FinancialChart__ or __FinancialSeries__ binding property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".

### Kagi Options

Set the following settings for Kagi charts in the __options__.

* __kagi.fields__: Specifies the __DataFields__ used for the Kagi chart. The default value is DataFields.Close.
* __kagi.rangeMode__: Specifies the __RangeMode__ for the Kagi chart. The default value is RangeMode.Fixed. Other options include ATR and Percentage.
* __kagi.reversalAmount__: Specifies the reversal amount for the Kagi chart. The default value is 14.

Example:

```JavaScript
myFinancialChart.options = {
  kagi: {
     fields: wijmo.chart.finance.DataFields.Close,
     rangeMode: wijmo.chart.finance.RangeMode.Fixed,
     reversalAmount: 14
  }
}
```

### Styling the Kagi Chart

The Kagi chart type uses the __altStyle__ to style the rising values for the ATR range mode. The common __style__ property (shared with all chart types) styles the falling values. Since Kagi is a line chart you should set the stroke.

Example:

```JavaScript
myFinancialChart.series[0].style = {
    stroke: 'rgb(136, 189, 230)'
};

myFinancialChart.series[0].altStyle = {
    stroke: 'red'
};
```

![Kagi Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-kagi.png)

# ColumnVolume

ColumnVolume charts are similar to Column charts, except that they accept a second value, volume, which dictates the width of each bar.

The data for this chart type can be defined using the __binding__ property as a comma separated value in the following format: "yProperty, volumeProperty". Only one set of volume data is currently supported per FinancialChart.

Example:

```JavaScript
import * as fChart from '@mescius/wijmo.chart.finance';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'ColumnVolume',
    series: [
        { binding: 'close,volume' }
    ]
});
```

![ColumnVolume Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-columnvolume.png)

# EquiVolume

EquiVolume charts are similar to Candlestick charts, but they only show the high and low values. In addition, the width of each bar is determined by a fifth value, volume. 

The data for this chart type can be defined using the __binding__ property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty, volumeProperty". Only one set of volume data is currently supported per FinancialChart. The EquiVolumn chart type uses the __altStyle__ to fill the rising values.

Example:

```JavaScript
import * as fChart from '@mescius/wijmo.chart.finance';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'EquiVolume',
    series: [
        { binding: 'high,low,open,close,volume' }
    ],
    altStyle: {
        stroke: 'rgb(136, 189, 230)',
        fill: 'transparent'
    }
});
```

![EquiVolume Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-equivolume.png)

# CandleVolume

andleVolume charts are identical to standard Candlestick charts, except that the width of each bar is determined by a fifth value, volume.

The data for this chart type can be defined using the __binding__ property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty, volumeProperty". The CandleVolumn chart type uses the __altStyle__ to fill the rising values.

Example:

```JavaScript
import * as fChart from '@mescius/wijmo.chart.finance';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'CandleVolume',
    series: [
        { binding: 'high,low,open,close,volume' }
    ],
    altStyle: {
        stroke: 'rgb(136, 189, 230)',
        fill: 'transparent'
    }
});
```

![CandleVolume Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-candlevolume.png)

# Arms CandleVolume

Created by Richard Arms, Arms CandleVolume charts are a combination of EquiVolume and CandleVolume charts. 

The data for this chart type can be defined using the __binding__ property as a comma separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty, volumeProperty". The ArmsCandleVolumn chart type uses the __altStyle__ to fill the rising values.

Example:

```JavaScript
import * as fChart from '@mescius/wijmo.chart.finance';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'ArmsCandleVolume',
    series: [
        { binding: 'high,low,open,close,volume' }
    ],
    altStyle: {
        stroke: 'rgb(136, 189, 230)',
        fill: 'transparent'
    }
});
```

![Arms CandleVolume Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-arms-candlevolume.png)

# Point & Figure

Point and Figure chart consists of columns of X's and O's that represent filtered price movements. X-Columns represent rising prices and O-Columns represent falling prices.

The data for this chart type can be defined using the __binding__ property as a comma separated value in the following format: "highProperty, lowProperty, closeProperty". The PointAndFigure chart type uses the __altStyle__ to color the alternate values.

Example:

```JavaScript
import * as fChart from '@mescius/wijmo.chart.finance';

var myFinancialChart = new fChart.FinancialChart('#myFinancialChart', {
    itemsSource: getAppData(),
    bindingX: 'date',
    chartType: 'PointAndFigure',
    series: [
        { binding: 'high,low,close' }
    ],
    style: {
        stroke: 'black'
    },
    altStyle: {
        stroke: 'red'
    }
});
```

### Point & Figure Options

Set the following settings for PointAndFigure charts in the __options__.

* __pointAndFigure.fields__: Specifies the __DataFields__ used for the point & figure chart. The default value is DataFields.Close.
* __pointAndFigure.reversal__: Specifies the reversal amount for the point & figure chart. The default value is 3.
* __pointAndFigure.scaling__: Traditional, Fixed, or Dynamic scaling mode.
  * Traditional: The box size is calculated automatically based on price range.
  * Fixed: The box size is defined by boxSize property.
  * Dynamic: The box size is calculated based on ATR.

Example:

```JavaScript
myFinancialChart.options = {
  kagi: {
     fields: wijmo.chart.finance.DataFields.Close,
     scaling: wijmo.chart.finance.PointAndFigureScaling.Fixed,
     reversal: 3
  }
}
```

![Point & Figure Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-point-figure.png)