How to customize the title in .NET MAUI Chart (SfCartesianChart)?
The .NET MAUI Chart allows you to customize the title of the chart. The title property summarizes the main idea or describes the content of the visual representation. This article explains how to customize the chart title in the SfCartesianChart as shown in the following code example.
[XAML]
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel>
</local:ViewModel>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.Title>
<Border Stroke="black" StrokeThickness="2"
Padding="16,8" HorizontalOptions="Center">
<Label x:Name="label" HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.FormattedText>
<FormattedString>
<Span Text="pH Level of Liquids"
FontAttributes="Bold" FontSize="Title"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
<Label.Shadow>
<Shadow Offset="1,1" Opacity="10" Radius="2">
<Shadow.Brush>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Red" Offset="0.1" />
<GradientStop Color="Green" Offset="1.0"/>
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Label.Shadow>
</Label>
</Border>
</chart:SfCartesianChart.Title>
<chart:SfCartesianChart.XAxes >
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Liquids"
FontAttributes="Bold"
TextColor="Black" />
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis Minimum="0" Interval="1" Maximum="14">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="pH Level"
FontAttributes="Bold"
TextColor="Black" />
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
<chart:LineSeries ItemsSource="{Binding Data}"
ShowDataLabels="True"
XBindingPath="Liquids"
YBindingPath="PHlevel" />
</chart:SfCartesianChart>[C#]
SfCartesianChart chart = new SfCartesianChart();
// Customize the chart title.
Border border = new Border()
{
StrokeThickness = 2,
Stroke = Colors.Black,
WidthRequest = 300,
Padding = 8,
};
LinearGradientBrush brush = new LinearGradientBrush()
{
EndPoint = new Point(0, 1),
GradientStops = new GradientStopCollection()
{new GradientStop(Colors.Red,0.1f),
new GradientStop(Colors.Green,1)}
};
FormattedString formattedString = new FormattedString();
formattedString.Spans.Add(new Span()
{
Text = "pH Level of Liquids",
TextColor = Colors.Black,
FontAttributes = FontAttributes.Bold,
FontSize = 25,
});
Label label = new Label()
{
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center,
FormattedText = formattedString,
Shadow = new Shadow()
{
Offset = new Point(1, 1),
Opacity = 10,
Radius = 2,
Brush = brush,
},
};
border.Content = label;
chart.Title = border;
ChartAxisTitle chartXAxisTitle = new ChartAxisTitle()
{
Text = "Liquids",
TextColor = Colors.Black,
FontAttributes = FontAttributes.Bold,
};
ChartAxisTitle chartYAxisTitle = new ChartAxisTitle()
{
Text = "pH Level",
TextColor = Colors.Black,
FontAttributes = FontAttributes.Bold,
};
//Initialize the Primary Axis.
CategoryAxis primaryAxis = new CategoryAxis()
{
Title = chartXAxisTitle,
};
//Initialize the Secondary Axis.
NumericalAxis secondaryAxis = new NumericalAxis()
{
Minimum = 0,
Maximum = 14,
Title = chartYAxisTitle,
};
chart.XAxes.Add(primaryAxis);
chart.YAxes.Add(secondaryAxis);
//Initialize the line series.
LineSeries lineSeries = new LineSeries()
{
ItemsSource = new ViewModel().Data,
XBindingPath = "Liquids",
YBindingPath = "PHlevel",
ShowDataLabels = true,
};
chart.Series.Add(lineSeries);
this.Content = chart;
Output
|
Conclusion
I hope you enjoyed learning how to customize the title in the .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
