| layout | post |
|---|---|
| title | Multi-Level Labels in .NET MAUI Cartesian Chart control | Syncfusion |
| description | Learn here all about multi-level labels and its features in Syncfusion® .NET MAUI Cartesian Chart (SfCartesianChart) control and more. |
| platform | chart-sdk |
| control | SfCartesianChart |
| documentation | ug |
| keywords | .net maui cartesian charts, .net maui multi-level labels, cartesian chart multi-level labels, syncfusion cartesian charts maui, maui cartesian chart axis labels, .net maui cartesian chart axis, multilevel label customization, .net maui sfCartesianChart axis labels. |
N> Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfCartesianChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.
Multi-level labels allow you to display multiple hierarchy levels of labels on the chart axes. This feature is particularly useful for categorizing data at different levels of detail, providing better organization and readability of large datasets. Multi-level labels can be applied to any ChartAxis in the Cartesian chart.
Multi-level labels can be added to any axis in the .NET MAUI Cartesian Chart, such as NumericalAxis, CategoryAxis, DateTimeAxis, DateTimeCategoryAxis, or LogarithmicAxis.
To add multi-level labels to an axis, use the MultiLevelLabels collection of the axis. Each multi-level label is defined using the following properties, of the ChartMultiLevelLabel class:
- Start, of type
object, sets the starting value of the label range. - End, of type
object, sets the ending value of the label range. - Text, of type
string, sets the text displayed for the label. - Level, of type
int, sets the hierarchy level (for example, 1 for the top level, 2 for sub-levels, and so on).
{% tabs %}
{% highlight xaml %}
chart:SfCartesianChart chart:SfCartesianChart.YAxes chart:NumericalAxis chart:NumericalAxis.MultiLevelLabels <chart:ChartMultiLevelLabel Start="0" End="79" Text="Low" Level="1"/> <chart:ChartMultiLevelLabel Start="80" End="149" Text="Medium" Level="1"/> <chart:ChartMultiLevelLabel Start="150" End="220" Text="High" Level="1"/> <chart:ChartMultiLevelLabel Start="0" End="39" Text="0-39" Level="2"/> <chart:ChartMultiLevelLabel Start="40" End="79" Text="40-79" Level="2"/> <chart:ChartMultiLevelLabel Start="80" End="114" Text="80-114" Level="2"/> <chart:ChartMultiLevelLabel Start="115" End="149" Text="115-149" Level="2"/> <chart:ChartMultiLevelLabel Start="150" End="184" Text="150-184" Level="2"/> <chart:ChartMultiLevelLabel Start="185" End="220" Text="185-220" Level="2"/> </chart:NumericalAxis.MultiLevelLabels> </chart:NumericalAxis> </chart:SfCartesianChart.YAxes> </chart:SfCartesianChart>
{% endhighlight %}
{% highlight c# %}
SfCartesianChart chart = new SfCartesianChart(); // code omitted for brevity NumericalAxis secondaryAxis = new NumericalAxis();
// Create first level multi-level labels ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() { Start = 0, End = 79, Text = "Low", Level = 1 }; secondaryAxis.MultiLevelLabels.Add(label1);
ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() { Start = 80, End = 149, Text = "Medium", Level = 1 }; secondaryAxis.MultiLevelLabels.Add(label2);
ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() { Start = 150, End = 220, Text = "High", Level = 1 }; secondaryAxis.MultiLevelLabels.Add(label3);
// Create second level multi-level labels ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() { Start = 0, End = 39, Text = "0-39", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label4);
ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() { Start = 40, End = 79, Text = "40-79", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label5);
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 80, End = 114, Text = "80-114", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label6);
ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() { Start = 115, End = 149, Text = "115-149", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label7);
ChartMultiLevelLabel label8 = new ChartMultiLevelLabel() { Start = 150, End = 184, Text = "150-184", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label8);
ChartMultiLevelLabel label9 = new ChartMultiLevelLabel() { Start = 185, End = 220, Text = "185-220", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label9);
chart.YAxes.Add(secondaryAxis); this.Content = chart;
{% endhighlight %}
{% endtabs %}
The appearance of multi-level labels can be customized using the MultiLevelLabelStyle property. The MultiLevelLabelStyle provides the following customization properties:
- BorderType, of type
ChartMultiLevelBorderType, sets the border type for multi-level labels. - BorderColor, of type
Color, sets the border color. - BorderWidth, of type
double, sets the border width. - LabelStyle, of type
ChartAxisLabelStyle, sets the text styling for the multi-level label.
The LabelStyle property supports the following ChartAxisLabelStyle customization options:
- FontAttributes, of type
FontAttributes, sets the font style for the label text. - FontSize, of type
double, sets the size of the label text. - Margin, of type
Thickness, sets the space around the label text. - FontFamily, of type
string, sets the font family for the label text. - TextColor, of type
Color, sets the color of the label text. - LabelAlignment, of type
ChartAxisLabelAlignment, sets the alignment of the label text within the label area.
The BorderType property supports the following ChartMultiLevelBorderType values:
Rectangle- Displays the label with a rectangular border on all sides.WithoutTopAndBottom- Displays the label with a border on left and right sides only (no top and bottom).SquareBrace- Displays the label with a square brace border style.CurlyBrace- Displays the label with a curly brace border style.
The default value is Rectangle.
The following example demonstrates how to apply a square brace border style and label style:
{% tabs %}
{% highlight xaml %}
chart:SfCartesianChart chart:SfCartesianChart.YAxes chart:NumericalAxis chart:NumericalAxis.MultiLevelLabels <chart:ChartMultiLevelLabel Start="0" End="79" Text="Low" Level="1"/> <chart:ChartMultiLevelLabel Start="80" End="149" Text="Medium" Level="1"/> <chart:ChartMultiLevelLabel Start="150" End="220" Text="High" Level="1"/> <chart:ChartMultiLevelLabel Start="0" End="39" Text="0-39" Level="2"/> <chart:ChartMultiLevelLabel Start="40" End="79" Text="40-79" Level="2"/> <chart:ChartMultiLevelLabel Start="80" End="114" Text="80-114" Level="2"/> <chart:ChartMultiLevelLabel Start="115" End="149" Text="115-149" Level="2"/> <chart:ChartMultiLevelLabel Start="150" End="184" Text="150-184" Level="2"/> <chart:ChartMultiLevelLabel Start="185" End="220" Text="185-220" Level="2"/> </chart:NumericalAxis.MultiLevelLabels> chart:NumericalAxis.MultiLevelLabelStyle <chart:MultiLevelLabelStyle BorderColor="DarkBlue" BorderType="SquareBrace" BorderWidth="2"> chart:MultiLevelLabelStyle.LabelStyle <chart:ChartAxisLabelStyle TextColor="Green" FontAttributes="Bold" FontSize="13" Stroke="DarkGreen" StrokeWidth="2"/> </chart:MultiLevelLabelStyle.LabelStyle> </chart:MultiLevelLabelStyle> </chart:NumericalAxis.MultiLevelLabelStyle> </chart:NumericalAxis> </chart:SfCartesianChart.YAxes> </chart:SfCartesianChart>
{% endhighlight %}
{% highlight c# %}
SfCartesianChart chart = new SfCartesianChart(); // code omitted for brevity NumericalAxis secondaryAxis = new NumericalAxis();
// Create multi-level labels for level 1 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel() { Start = 0, End = 79, Text = "Low", Level = 1 }; secondaryAxis.MultiLevelLabels.Add(label1);
ChartMultiLevelLabel label2 = new ChartMultiLevelLabel() { Start = 80, End = 149, Text = "Medium", Level = 1 }; secondaryAxis.MultiLevelLabels.Add(label2);
ChartMultiLevelLabel label3 = new ChartMultiLevelLabel() { Start = 150, End = 220, Text = "High", Level = 1 }; secondaryAxis.MultiLevelLabels.Add(label3);
// Create multi-level labels for level 2 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel() { Start = 0, End = 39, Text = "0-39", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label4);
ChartMultiLevelLabel label5 = new ChartMultiLevelLabel() { Start = 40, End = 79, Text = "40-79", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label5);
ChartMultiLevelLabel label6 = new ChartMultiLevelLabel() { Start = 80, End = 114, Text = "80-114", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label6);
ChartMultiLevelLabel label7 = new ChartMultiLevelLabel() { Start = 115, End = 149, Text = "115-149", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label7);
ChartMultiLevelLabel label8 = new ChartMultiLevelLabel() { Start = 150, End = 184, Text = "150-184", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label8);
ChartMultiLevelLabel label9 = new ChartMultiLevelLabel() { Start = 185, End = 220, Text = "185-220", Level = 2 }; secondaryAxis.MultiLevelLabels.Add(label9);
// Customize the appearance with square brace border ChartAxisLabelStyle labelStyle = new ChartAxisLabelStyle() { TextColor = Colors.Green, FontAttributes = FontAttributes.Bold, FontSize = 13, Stroke = new SolidColorBrush(Colors.DarkGreen), StrokeWidth = 2 };
MultiLevelLabelStyle multiLevelLabelStyle = new MultiLevelLabelStyle() { BorderColor = Colors.DarkBlue, BorderType = ChartMultiLevelBorderType.SquareBrace, BorderWidth = 2, LabelStyle = labelStyle };
secondaryAxis.MultiLevelLabelStyle = multiLevelLabelStyle;
chart.YAxes.Add(secondaryAxis); this.Content = chart;
{% endhighlight %}
{% endtabs %}
