The CandlestickChart control represents financial data as a series of candlesticks representing the high, low, opening, and closing values of a data series. The top and bottom of the vertical line in each candlestick represent the high and low values for the data point, while the top and bottom of the filled box represent the opening and closing values. Each candlestick is filled differently depending on whether the closing value for the data point is higher or lower than the opening value.

The CandlestickChart control's CandlestickSeries requires all four data points: high, low, open, and close. If you do not want to use opening value data points, you can use the HighLowOpenClose charts, which do not require a data point that represents the opening value. For more information, see Using HighLowOpenClose charts.

You use the CandlestickSeries chart series with the CandlestickChart control to define the data.

The following shows an example of a CandlestickChart control:

The following table describes the properties of the CandlestickSeries chart series that you commonly use to define your chart:

If the closeField is lower than the openField, Flex applies a solid fill to the candle. The color of this solid fill defaults to the color of the box's outline. It is defined by the declineFill style property. If the closeField is higher than the openField, Flex fills the candle with white by default.

The following image shows the properties that define the appearance of the candle. As you can see, the location of the closeField property can be either the top or the bottom of the candlestick, depending on whether it is higher or lower than the openField property:

The following example creates a CandlestickChart control:

<?xml version="1.0"?>
<!-- charts/BasicCandlestick.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     [Bindable]
     public var TICKER:Array = [
        {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
        {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
        {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
        {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
        {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
        {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
        {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
        {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
        {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
        {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
     ];
  ]]></mx:Script>

  <mx:Panel title="Candlestick Chart">
     <mx:CandlestickChart id="mychart" 
        dataProvider="{TICKER}" 
        showDataTips="true" 
        height="400" 
        width="400"
     >
        <mx:series>
           <mx:CandlestickSeries 
                dataProvider="{TICKER}" 
                openField="open" 
                highField="high" 
                lowField="low" 
                closeField="close" 
                displayName="TICKER"
           />
        </mx:series>
     </mx:CandlestickChart>
     <mx:Legend dataProvider="{mychart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can change the color of the candle's fill with the fill and declineFill properties of the series. The fill property defines the color of the candlestick when the closeField value is higher than the openField value. The declineFill property defines the color of the candlestick when the reverse is true. You can also define the properties of the high-low lines and candlestick borders by using a Stroke class, as the following example shows:

<?xml version="1.0"?>
<!-- charts/CandlestickStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var TICKER:ArrayCollection = new ArrayCollection([
        {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
        {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
        {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
        {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
        {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
        {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
        {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
        {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
        {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
        {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
     ]);
  ]]></mx:Script>

  <mx:Panel title="Candlestick Chart">
     <mx:CandlestickChart id="mychart"
        dataProvider="{TICKER}"
        showDataTips="true"
        height="400"
        width="400"
     >
        <mx:verticalAxis>
           <mx:LinearAxis title="linear axis" minimum="40" maximum=
           "50"/>
        </mx:verticalAxis>

        <mx:series>
           <mx:CandlestickSeries
                dataProvider="{TICKER}"
                openField="open"
                highField="high"
                lowField="low"
                closeField="close"
                displayName="TICKER"
           >
            <mx:fill>
                <mx:SolidColor color="green"/>
            </mx:fill>
            <mx:declineFill>
                <mx:SolidColor color="red"/>
            </mx:declineFill>
            <mx:stroke>
                <mx:Stroke weight="1" color="black"/>
            </mx:stroke>
           </mx:CandlestickSeries>
        </mx:series>
     </mx:CandlestickChart>
     <mx:Legend dataProvider="{mychart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: