Syncfusion Feedback


Xamarin.Forms Xamarin Charts Stacked Line 100 Chart

Overview

The Xamarin.Forms 100% stacked line chart displays multiple series of data as stacked lines, ensuring that the cumulative proportion of each stacked element always totals 100%. Thus, the y-axis will always render within the range 0–100. This chart type is best suited for depicting the relative contribution of data points.

The Beautiful Xamarin.Forms Stacked line 100 Chart

Key features

The Xamarin.Forms chart show the vertical rendering in stacked line 100 chart

Vertical rendering

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

The Xamarin.Forms chart show the markers in stacked line 100 chart

Marker

Marks data points with built-in shapes such as circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition to these shapes, use images to make the point more attractive.

The Xamarin.Forms chart shows the data labels of stacked line 100 chart

Data labels

Show the detail about the data points with the help of the data label support. Can place the label inside and outside of the chart. Use the connector line to connect the outside label with chart.

The Xamarin.Forms chart shows the color and line customization in stacked line 100 chart

UI Customization

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

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:StackingLine100Series ItemsSource="{Binding Data}" XBindingPath="Category" YBindingPath="Expense"/>
               
	</chart:SfChart>
	
</ContentPage>
public class Model
{
    public string Category { get; set; }

    public double Expense { get; set; }

    public Model(string xValue, double yValue)
    {
        Category = xValue;
        Expense = yValue;
    }
}

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

    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
           new Model("Food", 88),
           new Model("Transport", 75),
           new Model("Medical", 68),
           new Model("Clothes", 70),
           new Model("Books", 65),
           new Model("Others", 73),
        };
    }
}

Learning resources

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

GitHub Code

The Xamarin.Forms 100% stacked line chart configuration code is available in GitHub.

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

100% Stacked Line Chart User Guide

Learn available options to customize the Xamarin.Forms 100% stacked line chart.

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

100% Stacked Line Chart API Reference

Explore the Xamarin.Forms 100% stacked 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