# Candlestick Charts with FlexChart

Learn how to create candlestick charts using Wijmo's FlexChart in this documentation topic

## Content

Candlestick charts are used to describe price movements of a security, derivative, or currency over time.

The size of the wick line is determined by the High and Low values; the size of the bar is determined by the Open and Close values. The bar color indicates whether the Close value is higher or lower than the Open value (empty/filled bar).

To create candlestick charts with the FlexChart control, set the __bindingX__ property to the name of the property that contains the dates, and add a single series with __binding__ set to a comma-delimited string containing the names of the properties that represent the High, Low, Open, and Close values (in that exact order).

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

// create the chart
var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getData(),
    bindingX: 'date',
    chartType: 'Candlestick',
    series: [
      { binding: 'high,low,open,close', name: 'Alphabet Inc' }
    ]
});
```
![Candlestick Chart](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-candlestick.png)

## Setting the Alternate Fill Color
Candlestick charts support an additional element that needs to be styled: the alternate fill color when the data point's open value is greater than its close value.

The __altStyle__ (alternative style) is used for negative values in Bar, Column, and Scatter charts; and for rising values in financial chart types like Candlestick, LineBreak, EquiVolume etc. By default, the __altStyle__ is null and uses the default style.

Example:

```JavaScript
myChart.series[0].style = {
    fill:'green', 
    stroke:'darkgreen',
    strokeWidth: 1};

myChart.series[0].altStyle = {
    fill:'red', 
    stroke:'darkred',
    strokeWidth: 1};
```

## Customizing the Tooltip
Since the Candlestick chart type has more than just one value plotted, it can be helpful for the user to display more information than the default tooltip provides.

The tooltip's __content__ property is an HTML template that may contain information about the series, the data point, and the data element. For example:

```JavaScript
myChart.tooltip.content = '<b>{date:MMM dd}</b><br/>' +
    '<table>' +
      	'<tr><td>high</td><td>{high:c}</td><tr/>' +
      	'<tr><td>low</td><td>{low:c}</td><tr/>' +
      	'<tr><td>open</td><td>{open:c}</td><tr/>' +
      	'<tr><td>close</td><td>{close:c}</td><tr/>' +
    '</table>';
```
In this example, 'date', 'high', 'low', 'open', and 'close' are the names of the bound fields.

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