CandleStickSeries Class

Displays an Open-High-Low-Close typical financial series so that each data point consists of a vertical line indicating the price range over one unit of time and a rectangle showing the opening and closing prices for that time period.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

Declaration

public class CandleStickSeries :
    FinancialSeries

Remarks

This view is used to visualize the stock market state for a particular time period.

A data point is green if the stock closes higher than its opening price. Otherwise, the point is red.

Candlestick Series

Series Data

To provide data for the candlestick series, set the CandleStickSeries.Data property to the SeriesDataAdapter class instance. Use the adapter's properties to specify the data source for the series, and to define the data source members used to generate series points and labels. This series type requires 1 argument and 4 values (open, high, low, and close prices) for a data point.

You can also create a custom data adapter to populate the series with data. For example, it can be useful when data is generated on the fly and you don't need to store it.

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>
<dxc:ChartView>
    <dxc:ChartView.Series>
        <dxc:CandleStickSeries>
            <dxc:CandleStickSeries.Data>
                <dxc:SeriesDataAdapter DataSource="{Binding StockPrices}" ArgumentDataMember="Date">
                    <dxc:ValueDataMember Type="High" Member="High" />
                    <dxc:ValueDataMember Type="Low" Member="Low" />
                    <dxc:ValueDataMember Type="Open" Member="Open" />
                    <dxc:ValueDataMember Type="Close" Member="Close" />
                </dxc:SeriesDataAdapter>
            </dxc:CandleStickSeries.Data>
        </dxc:CandleStickSeries>
    </dxc:ChartView.Series>
</dxc:ChartView>

Indicators

Technical indicators are special metrics used to analyze and process financial data visually.

You can add the following indicators to a candlestick series:

Indicators

Class

Simple Indicators

RegressionLineIndicator

Price Indicators

MedianPriceIndicator
TypicalPriceIndicator
WeightedCloseIndicator

Moving Average and Envelope

MovingAverageIndicator
ExponentialMovingAverageIndicator
WeightedMovingAverageIndicator
TriangularMovingAverageIndicator
EnvelopeIndicator

Trend Indicators

BollingerBandsIndicator
MassIndexIndicator
StandardDeviationIndicator

Oscillator Indicators

AverageTrueRangeIndicator
CommodityChannelIndexIndicator
MovingAverageConvergenceDivergenceIndicator
RateOfChangeIndicator
RelativeStrengthIndexIndicator
ChaikinsVolatilityIndicator
WilliamsRIndicator

Example

This example demonstrates how to build a Bollinger Bands indicator for Close prices of a candlestick series.

  1. Add the BollingerBandsIndicator object to the chart's collection of series (ChartView.Series).
  2. Set the indicator's Data property to a CalculatedSeriesDataAdapter class instance. Use this object's Series property to specify a series for which the indicator should be calculated.
  3. Use the ValueLevel and PointsCount properties to specify the price level of a financial series point and the number of data points used to calculate the simple moving average and standard deviation.
  4. Use the StandardDeviationMultiplier property to specify the number of standard deviations that define the distance between the moving average (middle band) and the upper/lower band.
<dxc:ChartView x:Name="chart">
    <dxc:ChartView.Series>
        <dxc:CandleStickSeries>
            <dxc:CandleStickSeries.Data>
                <dxc:SeriesDataAdapter DataSource="{Binding StockPrices}" ArgumentDataMember="Date">
                    <dxc:ValueDataMember Type="High" Member="High" />
                    <dxc:ValueDataMember Type="Low" Member="Low" />
                    <dxc:ValueDataMember Type="Open" Member="Open" />
                    <dxc:ValueDataMember Type="Close" Member="Close" />
                </dxc:SeriesDataAdapter>
            </dxc:CandleStickSeries.Data>
        </dxc:CandleStickSeries>

        <dxc:BollingerBandsIndicator ValueLevel="Close" 
                                     PointsCount="20"
                                     StandardDeviationMultiplier="2" 
                                     DisplayName="Bollinger Bands 20">
            <dxc:BollingerBandsIndicator.Data>
                <dxc:CalculatedSeriesDataAdapter Series="{Binding Series[0], Source={x:Reference chart}}"/>
            </dxc:BollingerBandsIndicator.Data>
        </dxc:BollingerBandsIndicator>
    </dxc:ChartView.Series>
</dxc:ChartView>

Empty Ranges

When plotting stock prices, you can exclude ranges with no data from a date-time X-axis (for example, to avoid gaps on weekends when markets are closed). To do this, set the DateTimeAxisX.EmptyRangesVisible property to false (the default value is true).

Candlestick Series Empty Ranges

Series Labels

You can accompany candlestick series' data points with labels to show data point values as text on a chart:

Candlestick Series Labels

To enable series labels, set the CandleStickSeries.Label property to the FinancialSeriesLabel object, and use this object's properties to adjust the label settings:

  • TextPattern - Formats series label text.
    A pattern includes regular text (which is displayed as is) and placeholder strings enclosed in braces. Placeholders define which values are shown in labels. You can use the following placeholders to specify the text pattern for candlestick series' labels:

    Placeholder

    Description

    {S}

    Displays a series name.

    {A}

    Displays a series point argument.

    {O}

    Displays a financial series point open value.

    {H}

    Displays a financial series point high value.

    {L}

    Displays a financial series point low value.

    {C}

    Displays a financial series point close value.

    NOTE

    To format these values, you can use default format strings after the $ sign.
    For example, in the {C$#.##} string, C is a placeholder, $ is a format string separator, and #.## is a format string.

  • Position , Indent - Specify how a label is positioned relative to a series point.
  • Style - Provides access to the SeriesLabelStyle object that stores label appearance settings (TextStyle).
  • Visible - Allows you to show or hide labels for the series.
<dxc:CandleStickSeries>
    <dxc:CandleStickSeries.Label>
        <dxc:FinancialSeriesLabel TextPattern="{}{C$#.#}"
                                  Position="Top" 
                                  Indent="15"/>
    </dxc:CandleStickSeries.Label>
</dxc:CandleStickSeries>

Legend

A legend (ChartBaseView.Legend) allows you to distinguish between series on a chart. A legend item includes a color marker and text that explains data the series shows.

Candlestick Series Legend

The series' LegendTextPattern property allows you to configure a string that the series provides for a legend item. The default text that a legend item shows is the series' DisplayName.

<dxc:CandleStickSeries LegendTextPattern="Stocks: {S}">
    <!--...-->
</dxc:CandleStickSeries>

To exclude a particular series from the legend, set that series' VisibleInLegend property to false.

Hints

ChartView can display hints (ChartView.Hint) as tooltips or as a crosshair cursor to show information about a tapped series or data point. A hint requests data to display from a series. Use the Series.HintOptions property to specify which data the series should return for a hint.

Tooltips

This example demonstrates how to set up the chart so that it shows a tooltip for a candlestick series point when a user taps it.

Candlestick Series Tooltip

  1. Set the chart hint's Behavior property to the TooltipHintBehavior class instance.
  2. Set the series' HintOptions property to the SeriesHintOptions object and use the PointTextPattern property to specify the tooltip text pattern.
    When configuring financial series, you can use the following placeholders to specify text patterns for items of the crosshair label:

    Placeholder

    Description

    {S}

    Displays a series name.

    {A}

    Displays a series point argument.

    {O}

    Displays a financial series point open value.

    {H}

    Displays a financial series point high value.

    {L}

    Displays a financial series point low value.

    {C}

    Displays a financial series point close value.

    NOTE

    To format these values, you can use default format strings after the $ sign.
    For example, in the {C$#.##} string, C is a placeholder, $ is a format string separator, and #.## is a format string.

<dxc:ChartView>
    <dxc:ChartView.Hint>
        <dxc:Hint>
            <dxc:Hint.Behavior>
                <dxc:TooltipHintBehavior ShowPointTooltip="True" ShowSeriesTooltip="False"/>
            </dxc:Hint.Behavior>
        </dxc:Hint>
    </dxc:ChartView.Hint>

    <dxc:ChartView.Series>
        <dxc:CandleStickSeries>
                <dxc:CandleStickSeries.HintOptions>
                        <dxc:SeriesHintOptions 
                            PointTextPattern="{}{S}&#10;High: ${H$###.##}&#10;Open: ${O$###.##}&#10;Low: ${L$###.##}&#10;Close: ${C$###.##}"/>
                </dxc:CandleStickSeries.HintOptions>
            <!--Series Data-->
        </dxc:CandleStickSeries>
    </dxc:ChartView.Series>    
</dxc:ChartView>

Crosshair Cursor

This example demonstrates how to set up the chart so that it shows a hint for a candlestick series point as a crosshair cursor.

Candlestick Series Crosshair

  1. Set the chart hint's Behavior property to the CrosshairHintBehavior class instance.
  2. Set the series' HintOptions property to the SeriesCrosshairOptions object and specify this object's properties:

    • ShowInLabel - to specify whether the crosshair label should provide information for points of the current series.
    • PointTextPattern - to define the text pattern used to show information about the series point within a crosshair label.
      When configuring financial series, you can use the following placeholders to specify text patterns for items of the crosshair label:

      Placeholder

      Description

      {S}

      Displays a series name.

      {A}

      Displays a series point argument.

      {O}

      Displays a financial series point open value.

      {H}

      Displays a financial series point high value.

      {L}

      Displays a financial series point low value.

      {C}

      Displays a financial series point close value.

      NOTE

      To format these values, you can use default format strings after the $ sign.
      For example, in the {C$#.##} string, C is a placeholder, $ is a format string separator, and #.## is a format string.

    • AxisLineVisible, AxisLabelVisible - to specify whether the crosshair cursor should display axis lines and labels for the series.
<dxc:ChartView>
    <dxc:ChartView.Hint>
        <dxc:Hint>
            <dxc:Hint.Behavior>
                <dxc:CrosshairHintBehavior GroupHeaderTextPattern="{}{A$MM/dd/yy}" 
                                           MaxSeriesCount="4"/>
            </dxc:Hint.Behavior>
        </dxc:Hint>
    </dxc:ChartView.Hint>

    <dxc:ChartView.Series>
        <dxc:CandleStickSeries>
            <dxc:CandleStickSeries.HintOptions>
                <dxc:SeriesCrosshairOptions 
                    PointTextPattern="{}{S}&#10;High: ${H$###.##}&#10;Open: ${O$###.##}&#10;Low: ${L$###.##}&#10;Close: ${C$###.##}"
                    ShowInLabel="True"
                    AxisLabelVisible="True"
                    AxisLineVisible="True"/>
            </dxc:CandleStickSeries.HintOptions>
            <!--Series Data-->
        </dxc:CandleStickSeries>
    </dxc:ChartView.Series>    
</dxc:ChartView>
NOTE

A crosshair cursor also requests data to display from axes. Use the AxisBase.HintOptions property to specify how the hint interacts with the axis.

Series Appearance

To change the candlestick series appearance, set the CandleStickSeries.Style property to the CandleStickSeriesStyle object, and use this object's properties that specify colors (RisingStroke/RisingFill and FallingStroke/FallingFill) and thickness (StrokeThickness) of data point markers (candlesticks).

Candlestick Series Appearance

<dxc:CandleStickSeries>
    <dxc:CandleStickSeries.Style>
        <dxc:CandleStickSeriesStyle RisingStroke="#1f201e" RisingFill="#474946"
                                    FallingStroke="#e63833" FallingFill="#ff6c60"
                                    StrokeThickness="2"/>
    </dxc:CandleStickSeries.Style>
    <!--Series Data-->
</dxc:CandleStickSeries>

Inheritance

Object
Xamarin.Forms.BindableObject
See Also