WPF HiLo (High-Low) Chart is similar to OHLC, but shows high and low values of the stock over the given period of time. It supports zooming, scrolling, tooltip, trackball, and selection.
The WPF HiLo Chart allows you to plot multiple HiLo series in a single chart to compare different data sets. Enabling the legend and tooltip gives more information about individual series.
Data labels display information about the data points. It provides the support for customizing the foreground, border, and background in addition to template support to customize the default appearance with the desired view. You can rotate a data label by its given angle.
Use multiple axes to plot different data sets along two or more axes having different data points and values.
Easily get started with WPF HiLo Chart using a few simple lines of XAML and C# code, as demonstrated below,
<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 HiLo 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:CategoryAxis />
</chart:SfChart.PrimaryAxis>
<!--Initialize the vertical axis for the WPF Chart-->
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis />
</chart:SfChart.SecondaryAxis>
<!--Adding HiLo Series to the WPF Chart-->
<chart:HiLoSeries
High="High"
ItemsSource="{Binding StockPriceDetails}"
Low="Low"
XBindingPath="Month">
</chart:HiLoSeries>
</chart:SfChart>
</StackPanel>
</Window>
public class HiLoChartModel
{
public string Month { get; set; }
public double High { get; set; }
public double Low { get; set; }
}
public class ViewModel
{
public ObservableCollection<HiLoChartModel> StockPriceDetails { get; set; }
public ViewModel()
{
this.StockPriceDetails = new ObservableCollection<HiLoChartModel>();
this.StockPriceDetails.Add(new HiLoChartModel() { Month = "Japan", High = 100, Low = 70 });
this.StockPriceDetails.Add(new HiLoChartModel() { Month = "China", High = 170, Low = 90 });
this.StockPriceDetails.Add(new HiLoChartModel() { Month = "America", High = 240, Low = 170 });
this.StockPriceDetails.Add(new HiLoChartModel() { Month = "Russia", High = 200, Low = 290 });
this.StockPriceDetails.Add(new HiLoChartModel() { Month = "Mexico", High = 200, Low = 110 });
}
}
Explore the WPF HiLo Chart example from GitHub to learn how to render and configure charts.
Learn more about the available options to customize WPF HiLo Charts.
Explore the WPF HiLo Chart APIs.