Syncfusion Feedback


.NET MAUI Cartesian Charts Stacked Line Chart

Overview

The .NET MAUI stacked line chart visualizes data with y-values stacked one over another in a series. It shows the relationship between individual values to the total sum of the points. Create beautiful, animated, real-time, high-performance stacked line charts that also support interactive features such as zooming, panning, trackballs, and tooltips.

.NET MAUI Stacked Line Chart documentation

.NET MAUI stacked line chart.

Key features

.NET MAUI stacked line chart with data labels.

Data labels

Data labels display information about data points. Customize the label’s foreground, border, and background. Rotate a data label by a specified angle.

.NET MAUI vertical stacked line chart.

Vertical chart

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

.NET MAUI stacked line chart with different markers.

Marker

Data points in a stacked line chart are visualized as marks using built-in symbols such as crosses, squares, plus signs, inverted triangles, hexagons, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons.

.NET MAUI stacked line chart with multiple axes.

Multiple axes

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

Code example

  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"
  9.                                 VerticalOptions="FillAndExpand">
  10.             <!--Setting BindingContext-->
  11.             <chart:SfCartesianChart.BindingContext>
  12.                 <local:ViewModel/>
  13.             </chart:SfCartesianChart.BindingContext>
  14.  
  15.             <!--Initialize the horizontal axis for the .NET MAUI Cartesian Chart.-->
  16.             <chart:SfCartesianChart.XAxes>
  17.                 <chart:CategoryAxis/>
  18.             </chart:SfCartesianChart.XAxes>
  19.  
  20.             <!--Initialize the vertical axis for the .NET MAUI Cartesian Chart.-->
  21.             <chart:SfCartesianChart.YAxes>
  22.                 <chart:NumericalAxis/>
  23.             </chart:SfCartesianChart.YAxes>
  24.            
  25.             <!--Adding Stacked Line Series to the .NET MAUI Cartesian Chart.-->
  26.             <chart:SfCartesianChart.Series>
  27.                 <chart:StackingLineSeries 
  28.                             ItemsSource="{Binding Data}"
  29.                             XBindingPath="Name"
  30.                             YBindingPath="High"
  31.                             ShowMarkers="True">
  32.                 </chart:StackingLineSeries>
  33.                 <chart:StackingLineSeries 
  34.                             ItemsSource="{Binding Data}"
  35.                             XBindingPath="Name"
  36.                             YBindingPath="Low"
  37.                             ShowMarkers="True">
  38.                 </chart:StackingLineSeries>
  39.                 <chart:StackingLineSeries 
  40.                             ItemsSource="{Binding Data}"
  41.                             XBindingPath="Name"
  42.                             YBindingPath="Value"
  43.                             ShowMarkers="True">
  44.                 </chart:StackingLineSeries>
  45.                 <chart:StackingLineSeries 
  46.                             ItemsSource="{Binding Data}"
  47.                             XBindingPath="Name"
  48.                             YBindingPath="Size"
  49.                             ShowMarkers="True">
  50.                 </chart:StackingLineSeries>
  51.             </chart:SfCartesianChart.Series>
  52.         </chart:SfCartesianChart>
  53.     </Grid>
  54. </ContentPage>
  1. public class Model
  2. {
  3.     public string Name { get; set; }
  4.         
  5.     public double High { get; set; }
  6.         
  7.     public double Low { get; set; }
  8.         
  9.     public double Value { get; set; }
  10.  
  11.     public double Size { get; set; }
  12.  
  13.     public Model(string name, double high, double low, double value,double size)
  14.     {
  15.         Name = name;
  16.         High = high
  17.         Low = low
  18.         Value = value
  19.         Size = size
  20.     }
  21. }
  22.  
  23. public class ViewModel
  24. {
  25.     public ObservableCollection<Model> Data { get; set; }
  26.  
  27.     public ViewModel()
  28.     {
  29.         Data = new ObservableCollection<Model>()
  30.         {
  31.             new Model("Mon", 100,90,60,150),
  32.             new Model("Tue", 120,100,80,140),
  33.             new Model("Wed", 140,120,90,160),
  34.             new Model("Thu", 160,140,100,180),
  35.             new Model("Fri", 160,140,100,180),
  36.             new Model("Sat", 160,140,100,180),
  37.         };
  38.     }
  39. }

Learning resources

Navigate to GitHub code used to configure the .NET MAUI stacked line chart.

GitHub Code

The .NET MAUI stacked line chart configuration code is available on GitHub.

Navigate to the user guide to explore the customization options available in the .NET MAUI stacked line chart.

.NET MAUI Stacked Line Chart User Guide

Explore the customization options available for the .NET MAUI stacked line chart.

Navigate to the API reference documentation of the .NET MAUI stacked line chart.

.NET MAUI stacked line chart API reference

Explore the .NET MAUI stacked line chart APIs.

Scroll up icon
Chat with us