Syncfusion Feedback


.NET MAUI Cartesian Charts Line Chart

Overview

The .NET MAUI line chart represents and visualizes time-dependent data to show trends at equal intervals. It supports numeric, category, and date-time axes, and works well with large amounts of data with animation, zooming, and panning.

.NET MAUI line chart documentation

.NET MAUI line Chart

Key features

.NET MAUI chart provides fast line support to display large amount of data

Fast line

The fast line chart is a special kind of line chart that can smoothly render a data collection with a large number of data points.

.NET MAUI vertical line chart

Vertical line chart

The line chart can be transposed vertically to view data from a different perspective.

.NET MAUI line 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 line chart using a few simple lines of XAML and C# code, as demonstrated below.

  1. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
  2.         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.         x:Class="ChartExample.MainPage"
  4.         xmlns:local="using:ChartExample"
  5.         xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
  6.     
  7.     <Grid>
  8.         <chart:SfCartesianChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  9.             <!--Setting BindingContext-->
  10.             <chart:SfCartesianChart.BindingContext>
  11.                 <local:ViewModel/>
  12.             </chart:SfCartesianChart.BindingContext>
  13.  
  14.             <!--Initialize the horizontal axis for the .NET MAUI Cartesian Chart-->
  15.             <chart:SfCartesianChart.XAxes>
  16.                 <chart:CategoryAxis/>
  17.             </chart:SfCartesianChart.XAxes>
  18.  
  19.             <!--Initialize the vertical axis for the .NET MAUI Cartesian Chart-->
  20.             <chart:SfCartesianChart.YAxes>
  21.                 <chart:NumericalAxis/>
  22.             </chart:SfCartesianChart.YAxes>
  23.            
  24.             <!--Adding LineSeries to the .NET MAUI Cartesian Chart-->
  25.             <chart:LineSeries 
  26.                         ItemsSource="{Binding Data}" 
  27.                         XBindingPath="Month"
  28.                         YBindingPath="Target">
  29.             </chart:LineSeries>   
  30.         </chart:SfCartesianChart>
  31.     </Grid>
  32. </ContentPage>
  1. public class Model
  2. {
  3.     public string Month { get; set; }
  4.  
  5.     public double Target { get; set; }
  6.  
  7.     public Model(string xValue, double yValue)
  8.     {
  9.         Month = xValue;
  10.         Target = yValue;
  11.     }
  12. }
  13.  
  14. public class ViewModel
  15. {
  16.     public ObservableCollection<Model> Data { get; set; }
  17.  
  18.     public ViewModel()
  19.     {
  20.         Data = new ObservableCollection<Model>()
  21.         {
  22.             new Model("Jan", 50),
  23.             new Model("Feb", 70),
  24.             new Model("Mar", 65),
  25.             new Model("Apr", 57),
  26.             new Model("May", 48), 
  27.         };
  28.     }
  29. }

Learning resources

Navigate to GitHub code used to configure the .NET MAUI Line Chart

GitHub Code

Explore the .NET MAUI line chart example from GitHub to learn how to render and configure charts.

Navigate to the options available in the user guide to customize the .NET MAUI line chart

.NET MAUI line chart user guide

Learn more about the available options to customize line charts.

Navigate to the API references documentation of the .NET MAUI line chart

.NET MAUI line chart API reference

Explore the .NET MAUI line chart APIs.

Scroll up icon
Chat with us