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 Xamarin.Forms step line chart is similar to the line chart, but it does not use the shortest distance to connect two data points using diagonal lines. Instead, the step line chart uses vertical and horizontal lines to connect data points in a series forming a step-like progression.

Beautiful Xamarin.Forms Step Line Chart


Key features

Shows the Xamarin.Forms vertical step line chart

Vertical rendering

Rotate the step line chart to plot data in a vertical direction and view data from a different perspective.

Xamarin.Forms chart shows the data labels

Data labels

Data points can easily be annotated with data labels to improve readability.

Xamarin.Forms chart shows the color and border customization

Customization

Customizes the color and thickness of a step line chart using built-in APIs to make it visually unique.

The Xamarin.Forms step line chart shows the empty or null point support

Empty or null data point

The Xamarin.Forms step line chart handles empty or null data points elegantly.

Xamarin.Forms chart shows the multiple axis support

Multiple axes

Use multiple axes to plot different data sets that widely vary from one other.


Code example

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ChartExample"
             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
             x:Class="ChartExample.MainPage">

    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>

    <chart:SfChart>

        <chart:SfChart.PrimaryAxis>
            <chart:CategoryAxis/>
        </chart:SfChart.PrimaryAxis>

        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfChart.SecondaryAxis>

        <chart:StepLineSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Target"/>

    </chart:SfChart>

</ContentPage>
public class Model
{
    public string Month { get; set; }

    public double Target { get; set; }

    public Model(string xValue, double yValue)
    {
        Month = xValue;
        Target = yValue;
    }
}

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
            new Model("Jan", 50),
            new Model("Feb", 70),
            new Model("Mar", 65),
            new Model("Apr", 57),
            new Model("May", 48), 
        };
    }
}

Learning resources

Navigate to GitHub code used to configure the Xamarin.Forms step line chart

GitHub Code

The Xamarin.Forms step line chart configuration code is available in GitHub.

Navigate to the options available in User Guide to customize the Xamarin.Forms step line chart

Step Line Chart User Guide

Learn available options to customize the Xamarin.Forms step line chart.

Navigate to the API references documentation of Xamarin.Forms step line chart

Step Line Chart API Reference

Explore the Xamarin.Forms step line chart APIs.


150+ XAMARIN UI CONTROLS

ALL CONTROLS
  • Xamarin.Forms
  • Xamarin.Android
  • Xamarin.iOS
The most downloaded control (based on the nuget.org download count).
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