We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Overview

The WPF Stock Chart or Candlestick Chart is most often used to represent the high, low, open, and close values of stocks on the stock market. It visualizes financial data and shows the data at equal intervals. It is often combined with line and column charts to show the close value and volume of the data. This type of chart supports interactive trackball, tooltip, and crosshair features to track information about the data.

WPF Candlestick Chart documentation

WPF Candlestick Chart


Key features

WPF Candlestick Chart showing Hollow and Filled data

Hollow and filled

Configure the hollow or filled candlestick appearance in the chart to communicate more information about the stock data at a glance.

WPF Multi Candlestick Chart

Multi-candle chart

Use multiples series in a candlestick chart to represent two or more data sets, where each data set represents high, low, open, and close values.

WPF Candlestick Chart with Multiple Axes

Multiple axes

The WPF Candle Chart allows you to render stock prices on different axes of the chart. Visualize the candle values in one pane and the trading volume in a different pane.

WPF Candlestick Chart with Bull and Bear

Bull and bear

Customize the bull and bear market colors in the WPF Candle Chart.


Code example

<Window x:Class="ChartExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        mc:Ignorable="d"
        Title="WPF Candlestick Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <chart:SfChart Height="300" Width="500">
            <!--Initialize the horizontal axis for the WPF Chart-->
            <chart:SfChart.PrimaryAxis>
                <chart:DateTimeAxis  LabelFormat="MMM dd"/>
            </chart:SfChart.PrimaryAxis>

            <!--Initialize the vertical axis for the WPF Chart-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis/>
            </chart:SfChart.SecondaryAxis>
           
            <!--Adding Candle Series to the WPF Chart-->
             <chart:CandleSeries
                Close="Close"
                ComparisonMode="Low"
                High="High"
                ItemsSource="{Binding StockPriceDetails}"
                Low="Low"
                Open="Open"
                XBindingPath="Date" />
        </chart:SfChart>
    </StackPanel>
</Window>
public class CandleChartModel
    {
        public DateTime Date { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
    }
    public class ViewModel
    {
        public ViewModel()
        {
            this.StockPriceDetails = new ObservableCollection<CandleChartModel>();
            DateTime date = new DateTime(2012, 4, 1);

            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(0), Open = 873.8, High = 878.85, Low = 855.5, Close = 860.5 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(1), Open = 873.8, High = 878.85, Low = 855.5, Close = 860.5 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(2), Open = 861, High = 868.4, Low = 835.2, Close = 843.45 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(3), Open = 846.15, High = 853, Low = 838.5, Close = 847.5 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(4), Open = 846, High = 860.75, Low = 841, Close = 855 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(5), Open = 841, High = 845, Low = 827.85, Close = 838.65 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(6), Open = 846, High = 874.5, Low = 841, Close = 860.75 });
            this.StockPriceDetails.Add(new CandleChartModel() { Date = date.AddDays(7), Open = 865, High = 872, Low = 865, Close = 868.9 });
        }
        public ObservableCollection<CandleChartModel> StockPriceDetails { get; set; }
    }

Learning resources

Navigate to GitHub code used to configure the WPF Candle Chart

GitHub Code

The WPF Candle Chart configuration code is available in GitHub.

Navigate to the options available in the user guide to customize the WPF Candle Chart

WPF Candle Chart User Guide

Learn more about the available options for customizing WPF Candle Charts.

Navigate to the API references documentation of the WPF Candle Chart

WPF Candle Chart API Reference

Explore the WPF Candle Chart APIs.


100+ WPF CONTROLS

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon