WPF HiLo Chart - High-Performance Chart

Overview

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.

WPF HiLo Chart documentation

WPF HiLo Chart

Key features

WPF HiLo Chart with Multple Series

Multi HiLo chart

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.

WPF HiLo Chart with Data Labels

Data labels

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.

WPF HiLo Chart with Multiple Axes

Multiple axes

Use multiple axes to plot different data sets along two or more axes having different data points and values.

Code example

Easily get started with WPF HiLo Chart using a few simple lines of XAML and C# code, as demonstrated below,

xaml
c#
<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 });
    }
}