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
Syncfusion Feedback


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,

<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 });
    }
}

Learning resources

Navigate to GitHub code used to configure the WPF HiLo Chart

GitHub Code

Explore the WPF HiLo Chart example from GitHub to learn how to render and configure charts.

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

WPF HiLo Chart User Guide

Learn more about the available options to customize WPF HiLo Charts.

Navigate to the API references documentation of the WPF HiLo Chart

WPF HiLo Chart API Reference

Explore the WPF HiLo Chart APIs.


95+ WPF CONTROLS

Scroll up icon