New to Telerik UI for .NET MAUI? Start a free 30-day trial

Candlestick Series

The Cartesian Chart visualizes each data point from the Candlestick Series as a visual that resembles a candlestick. This is a typical financial series that can be used to visualize the state of a market for a period of time. The series operates with a special kind of data in the form of four parameters defining the stock market - open, high, low, and close. The high and low values show the price range (the highest and lowest prices) over one unit of time. The open and close values indicate the opening and closing price of the stock for the corresponding period

Example

The following example shows how to create a basic RadCartesianChart with a Candlestick Series in XAML and C#.

  1. Define the RadCartesianChart.

    <telerik:RadCartesianChart PaletteName="Light" 
                          SelectionPaletteName="LightSelected"
                          BackgroundColor="White" >
      <telerik:RadCartesianChart.BindingContext>
          <local:SeriesOhlcViewModel />
      </telerik:RadCartesianChart.BindingContext>
      <telerik:RadCartesianChart.HorizontalAxis>
          <telerik:DateTimeContinuousAxis LineColor="#A9A9A9" 
                                       LabelFitMode="Rotate"
                                       LabelFormat="MMM"
                                       PlotMode="BetweenTicks" 
                                       MajorStepUnit="Month"/>
      </telerik:RadCartesianChart.HorizontalAxis>
      <telerik:RadCartesianChart.VerticalAxis>
          <telerik:NumericalAxis LineColor="#A9A9A9" 
                              MajorTickBackgroundColor="#A9A9A9" />
      </telerik:RadCartesianChart.VerticalAxis>
      <telerik:RadCartesianChart.Series>
          <telerik:CandlestickSeries CategoryBinding="Category"
                                  OpenBinding="Open" 
                                  HighBinding="High"
                                  LowBinding="Low"
                                  CloseBinding="Close"
                                  ItemsSource="{Binding SeriesData}" />
      </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
    
  2. Define the business model:

    public class OhlcDataPoint : NotifyPropertyChangedBase
    {
    private DateTime category;
    private double open;
    private double high;
    private double low;
    private double close;
    
    public DateTime Category
    {
        get { return this.category; }
        set
        {
            if (value != this.category)
            {
                this.category = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double Open
    {
        get { return this.open; }
        set
        {
            if (value != this.open)
            {
                this.open = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double High
    {
        get { return this.high; }
        set
        {
            if (value != this.high)
            {
                this.high = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double Low
    {
        get { return this.low; }
        set
        {
            if (value != this.low)
            {
                this.low = value;
                this.OnPropertyChanged();
            }
        }
    }
    
    public double Close
    {
        get { return this.close; }
        set
        {
            if (value != this.close)
            {
                this.close = value;
                this.OnPropertyChanged();
            }
        }
    }
    }
    
    1. And the ViewModel:

In this article
Not finding the help you need?