Telerik UI for Windows 8 XAML

Overview

The CandlestickSeries is similar to the OhlcSeries, but instead of tick marks, it uses a rectangle which horizontal sides define the opening and closing price. The rectangle is filled if the opening price is lower than closing one, otherwise it's empty.

Candle Stick Series
Note

CandlestickSeries class inherits from the OhlcSeriesBase class - See the inherited properties.

Example

Here's an example how to create RadCartesianChart with CandleStickSeries.

  1. First, create a class for the sample data.

    C# Copy imageCopy
    public class FinancialData
    {
        public double High { get; set; }
    
        public double Low { get; set; }
    
        public double Open { get; set; }
    
        public double Close { get; set; }
    }
  2. Then create the sample data.

    C# Copy imageCopy
    List<FinancialData> sampleData = new List<FinancialData>();
    sampleData.Add(new FinancialData() { High = 10, Open = 5, Low = 2, Close = 8 });
    sampleData.Add(new FinancialData() { High = 15, Open = 7, Low = 3, Close = 5 });
    sampleData.Add(new FinancialData() { High = 20, Open = 15, Low = 10, Close = 19 });
    sampleData.Add(new FinancialData() { High = 7, Open = 2, Low = 1, Close = 5 });
    sampleData.Add(new FinancialData() { High = 25, Open = 15, Low = 10, Close = 12 });
    
    this.candleStickSeries.DataContext = sampleData;
  3. Finally, we are ready to create the chart using XAML.

    XAML Copy imageCopy
    <telerik:RadCartesianChart x:Name="candleStickSeries">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:CandlestickSeries ItemsSource="{Binding}">
                <telerik:CandlestickSeries.HighBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="High"/>
                </telerik:CandlestickSeries.HighBinding>
                <telerik:CandlestickSeries.LowBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Low"/>
                </telerik:CandlestickSeries.LowBinding>
                <telerik:CandlestickSeries.OpenBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Open"/>
                </telerik:CandlestickSeries.OpenBinding>
                <telerik:CandlestickSeries.CloseBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Close"/>
                </telerik:CandlestickSeries.CloseBinding>
            </telerik:CandlestickSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>