In .NET MAUI Cartesian Chart, you can create a stacked column chart that displays both cumulative and non-cumulative values to enhance data visualization. This is achieved using the ShowDataLabels property for non-cumulative values and the annotation feature for cumulative values. The following steps explain how to show cumulative and non-cumulative values in StackedColumnSeries in the .NET MAUI Cartesian Chart. Step 1: Create the Model Class to Hold the Data The model will contain the cloud data representing different cloud providers and their respective values [C#] public class CloudDataCenter(string cloud, double unitedStates, double china, double germany, double singapore) { public string? Cloud { get; set; } = cloud; public double UnitedStates { get; set; } = unitedStates; public double China { get; set; } = china; public double Germany { get; set; } = germany; public double Singapore { get; set; } = singapore; } Step 2: Dataset Creation Create a CloudViewModel class to hold the dataset. [C#] public class CloudViewModel { public ObservableCollection<CloudDataCenter> CloudData { get; set; } public CloudViewModel() { CloudData = new ObservableCollection<CloudDataCenter> { new("Microsoft", 25, 30, 25, 15), new("Amazon", 20, 25, 18, 10), new("Google", 22, 28, 18, 12), new("Alibaba", 30, 8, 10, 15), new("IBM", 24, 18, 22, 18) }; } } Step 3: Configure the SfCartesianChart Configure the Syncfusion® .NET MAUI Toolkit Cartesian Chart using this getting started documentation as follows. [XAML] <chart:SfCartesianChart x:Name="chart"> <chart:SfCartesianChart.BindingContext> <model:CloudViewModel x:Name="viewModel"/> </chart:SfCartesianChart.BindingContext> <chart:SfCartesianChart.XAxes> <chart:CategoryAxis/> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); chart.BindingContext = new CloudViewModel(); // Initialize the primary axis as a CategoryAxis for the X-Axis CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); // Initialize the secondary axis as a NumericalAxis for the Y-Axis NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); this.Content = chart; Step 4: Enable DataLabels for Non-Cumulative Values Add the StackingColumnSeries to the chart, using the ShowDataLabels property of the series to enable and display the non-cumulative values. [XAML] <chart:SfCartesianChart x:Name="chart"> .......... .......... .......... <chart:ChartSeriesCollection> <chart:StackingColumnSeries ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="UnitedStates" ShowDataLabels="True"/> <chart:StackingColumnSeries ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="China" ShowDataLabels="True"/> <chart:StackingColumnSeries ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="Germany" ShowDataLabels="True"/> <chart:StackingColumnSeries ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="Singapore" ShowDataLabels="True"/> </chart:ChartSeriesCollection> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); // Eliminated for simplicity StackingColumnSeries series1 = new StackingColumnSeries() { ItemsSource = new CloudViewModel().CloudData, XBindingPath = "Cloud", YBindingPath = "UnitedStates", ShowDataLabels = true, // Enable the display of data labels for the series. }; StackingColumnSeries series2 = new StackingColumnSeries() { ItemsSource = new CloudViewModel().CloudData, XBindingPath = "Cloud", YBindingPath = "China", ShowDataLabels = true, }; StackingColumnSeries series3 = new StackingColumnSeries() { ItemsSource = new CloudViewModel().CloudData, XBindingPath = "Cloud", YBindingPath = "Germany", ShowDataLabels = true, }; StackingColumnSeries series4 = new StackingColumnSeries() { ItemsSource = new CloudViewModel().CloudData, XBindingPath = "Cloud", YBindingPath = "Singapore", ShowDataLabels = true, }; // Add all series to the chart chart.Series.Add(series1); chart.Series.Add(series2); chart.Series.Add(series3); chart.Series.Add(series4); this.Content = chart; In the screenshot below, you can observe non-cumulative values in a stacked column chart. Step 5: Add Annotations for Cumulative Values To add annotations, create an instance of any type of annotation and add it to the Annotations collection. In this example, the TextAnnotation is used to display cumulative values on top of the stacked columns. [C#] public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); chart.Annotations = new ChartAnnotationCollection(); for (int i = 0; i < viewModel.CloudData.Count; i++) { CloudDataCenter data = viewModel.CloudData[i]; // Calculate the cumulative values by summing the values of the countries double cumulativeValues = data.UnitedStates + data.China + data.Germany + data.Singapore; chart.Annotations.Add(new TextAnnotation() { Text = cumulativeValues.ToString(), X1 = i, Y1 = cumulativeValues + 3,// Increase this value for more space between the stack column chart and annotation LabelStyle = new ChartAnnotationLabelStyle() { FontSize = 20, FontAttributes = FontAttributes.Bold, } }); } } } Thus, the cumulative and non-cumulative values are shown in the chart as illustrated in the screenshot. Conclusion I hope you enjoyed learning how to show values on the column charts in .NET MAUI Cartesian Chart. You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. Explore our documentation to understand how to create and manipulate data. For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls. 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!
The Syncfusion® .NET MAUI Image Editor (SfImageEditor) allows you to add text after the image is loaded. This guide demonstrates how to achieve this by using the ImageLoaded event. XAML: Initialize the Image Editor control, provide the source image, and trigger the ImageLoaded event handler. <imageEditor:SfImageEditor x:Name="imageEditor" ImageLoaded="SfImageEditor_ImageLoaded" Source="image.png"> </imageEditor:SfImageEditor> C#: Utilize the ImageLoaded event to add text to the Image Editor once the image is loaded. The example below illustrates this process. private void SfImageEditor_ImageLoaded(object sender, EventArgs e) { imageEditor.AddText("Text", new ImageEditorTextSettings()); } Output: Conclusion: I hope you enjoyed learning how to add text after the image is loaded in the .NET MAUI Image Editor (SfImageEditor). Refer to our .NET MAUI Image Editor feature tour page for other groundbreaking feature representations. You can also explore our .NET MAUI Image Editor documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Image Editor and other .NET MAUI components. Please let us know in the following comment section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article explains how to auto-resize the rectangle annotation text in WPF Chart. Consider, the use case to dynamically change the annotation text and desired to adjust annotation based on dynamically applied text as shown in the following image. This has been achieved by changing the adjusted X2 and Y2 values of annotation, based on the measured applied text from the TextBox to annotation as shown in the following code sample. XAML <Grid x:Name="grid"> <Grid.DataContext> <local:ViewModel/> </Grid.DataContext> <Grid.ColumnDefinitions> <ColumnDefinition Width="80*"/> <ColumnDefinition Width="20*"/> </Grid.ColumnDefinitions> <chart:SfChart x:Name="chart"> <chart:SfChart.PrimaryAxis> <chart:NumericalAxis x:Name="xAxis"/> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis x:Name="yAxis" /> </chart:SfChart.SecondaryAxis> <chart:ColumnSeries ItemsSource="{Binding Collection}" XBindingPath="XValue" YBindingPath="YValue"/> <chart:SfChart.Annotations> <!--Text of rectangle annotation has been updated from TextBox--> <chart:RectangleAnnotation x:Name="annotation" HorizontalTextAlignment="Stretch" VerticalTextAlignment="Stretch" X1="2.5" Text="{Binding Source={x:Reference txtBlock},Path=Text}" Y1="22" ClipToBounds="True"/> </chart:SfChart.Annotations> </chart:SfChart> <StackPanel Orientation="Vertical" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" > <TextBlock Text="Change the annotation text" Margin="0,0,0,20" HorizontalAlignment="Center" VerticalAlignment="Center"/> <!--TextChanged event hook for updating its annotation X2,Y2 on every text changes--> <TextBox x:Name="txtBlock" TextChanged="txtBlock_TextChanged" /> </StackPanel> </Grid> C# private Size MeasuringString(string text) { if (string.IsNullOrEmpty(text)) { return new Size(0, 0); } var TextBlock = new TextBlock() { Text = text, FontWeight = FontWeights.Bold, }; TextBlock.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity)); return new Size(TextBlock.DesiredSize.Width, TextBlock.DesiredSize.Height); } private void UpdateAnnotation() { //Measured size from updated text of Textblock Size desireSize = MeasuringString(txtBlock.Text); var point1 = chart.ValueToPoint(xAxis, Convert.ToDouble(annotation.X1)); var point2 = chart.ValueToPoint(yAxis, Convert.ToDouble(annotation.Y1)); var point3 = point1 + desireSize.Width; var point4 = point2 + desireSize.Height; Point x2Points = new Point(point3, point4); var x2 = chart.PointToValue(chart.PrimaryAxis, x2Points); var y2 = chart.PointToValue(chart.SecondaryAxis, x2Points); annotation.X2 = x2; annotation.Y2 = y2; } private void txtBlock_TextChanged(object sender, TextChangedEventArgs e) { UpdateAnnotation(); } View the sample in GitHub. See alsoHow to position the annotation based on pixel in WPF Chart How to show the tooltip on annotation in WPF ChartHow to add image in WPF Chart annotation
This section explains how to add text programmatically when imageeditor loaded in a view. Create SfImageEditor sample with all necessary assemblies. Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it. https://help.syncfusion.com/xamarin/sfimageeditor/getting-started To add text programmatically when imageeditor loaded in a view in two types such as 1.Without Image 2.With Image Without Image: To add text, you need to call AddText() method when loading image editor in sample as like below code snippet Device.StartTimer(TimeSpan.FromMilliseconds(1000), () => { editor.AddText("Text", new TextSettings()); return false; }); Screen Shot: Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample_(2)1258160418.zip With Image: To add text when loading image editor with image, you need to call image loaded event as like below code snippet editor.ImageLoaded += (Object sender, ImageLoadedEventArgs args) => { editor.AddText("Text", new TextSettings()); }; Screen Shot: Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample378534320.zip
This section explains how to add text programmatically in Xamarin.Android Image Editor when imageeditor loaded in a view. Create SfImageEditor sample with all necessary assemblies. Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it. https://help.syncfusion.com/xamarin/sfimageeditor/getting-started To add text programmatically when imageeditor loaded in a view in two types such as 1.Without Image 2.With Image Without Image: To add text, you need to call AddText() method when loading image editor in sample as like below code snippet Device.StartTimer(TimeSpan.FromMilliseconds(1000), () => { editor.AddText("Text", new TextSettings()); return false; }); Screen Shot: Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample_(2)1258160418.zip With Image: To add text when loading image editor with image, you need to call image loaded event as like below code snippet editor.ImageLoaded += (Object sender, ImageLoadedEventArgs args) => { editor.AddText("Text", new TextSettings()); }; Screen Shot: Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample378534320.zip
This section explains how to add text programmatically in Xamarin.Forms Image Editor when image editor is loaded in a view. Create SfImageEditor sample with all necessary assemblies. Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it. https://help.syncfusion.com/xamarin/sfimageeditor/getting-started To add text programmatically when imageeditor loaded in a view in two types such as 1.Without Image 2.With Image Without Image: To add text, you need to call AddText() method when loading image editor in sample as like below code snippet Device.StartTimer(TimeSpan.FromMilliseconds(1000), () => { editor.AddText("Text", new TextSettings()); return false; }); Screen Shot: Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample_(2)1258160418.zip With Image: To add text when loading image editor with image, you need to call image loaded event as like below code snippet editor.ImageLoaded += (Object sender, ImageLoadedEventArgs args) => { editor.AddText("Text", new TextSettings()); }; Screen Shot: Sample Link:https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample378534320.zip ConclusionI hope you enjoyed learning about how to add text after image is loaded in Xamarin.Forms ImageEditor.You can refer to our Xamarin Image Editor's feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin Image Editor example to understand how to create and manipulate data.For current customers, you can check out our Xamarion controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This section explains how to add text programmatically when image editor is loaded in a view. Step 1: Create image editor sample with all necessary assemblies. Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it. https://help.syncfusion.com/uwp/sfimageeditor/getting-started You can add text programmatically in the following two ways when image editor is loaded in a view: Without image With image Step 2: To add text without image, call the AddText() method in the loaded event. The following code sample demonstrates how to add text by calling the AddText() method in the loaded event. C# public WithoutImage() { editor.Loaded += editor_Loaded; // Framework loaded event } private void editor_Loaded(object sender, RoutedEventArgs e) { editor.AddText("Without Image", new TextSettings()); } Screenshot Step 3: To add text with image, call the AddText() method in the imageloaded event. The following code sample demonstrates how to add text by calling the AddText() method in the imageloaded event . C# public WithImage() { editor.ImageLoaded += editor_ImageLoaded; // image editor ImageLoaded event } private void editor_ImageLoaded(object sender, ImageLoadedEventArgs e) { editor.AddText("With Image", new TextSettings()); } Screenshot Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageEditor_GettingStarted1556040743.zip
WPF Chart (SfChart) allows you to customize the annotation’s behavior by defining your own template using the ContentTemplate property. In some scenarios, you may want to display or use underlying values or any other values from any object. In this case, you need the specific object in your template, since by default data context of the content template has string value. You can customize this to get the data context as object. For this requirement, you should define the custom annotation inheritance from TextAnnotation as shown in the following code example. C# public class CustomTextAnnotation : TextAnnotation { public object Content { get { return (object)GetValue(ContentProperty); } set { SetValue(ContentProperty, value); } } // Using DependencyProperty as the backing store for TextString. This enables animation, styling, binding, etc... public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(CustomTextAnnotation), new PropertyMetadata(null)); protected override void SetBindings() { base.SetBindings(); //You need to invoke this method to make all the default bindings if (TextElement != null) { Binding textBinding = new Binding { Path = new PropertyPath("Content"), Source = this }; //TextElement is content control define internally to display text. TextElement.SetBinding(ContentControl.ContentProperty, textBinding); } } } XAML <Window x:Class="Annotation_DataContext.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:chart="http://schemas.syncfusion.com/wpf" xmlns:local="clr-namespace:Annotation_DataContext" Title="Annotation DataContext" Height="700" Width="1000"> <Window.Resources> <DataTemplate x:Key="annotationTemplate1"> <TextBlock Text="{Binding Path=Annotation1}" Background="LightPink" Foreground="Black" FontSize="15" FontWeight="Medium"/> </DataTemplate> <DataTemplate x:Key="annotationTemplate2"> <StackPanel HorizontalAlignment="Center"> <TextBlock Text="{Binding Path=Annotation2.Name}" Background="LightPink" Foreground="Black" FontSize="15" FontWeight="Medium" Width="100"/> <TextBlock Text="{Binding Path=Annotation2.Range}" Background="LightPink" Foreground="Black" FontSize="15" FontWeight="Medium" Width="100"/> </StackPanel> </DataTemplate> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.DataContext> <local:ViewModel/> </Grid.DataContext> <chart:SfChart x:Name="chart" Header="PRODUCT DETAILS" FontSize="18" FontWeight="ExtraBlack"> <!--create custom text annotation--> <chart:SfChart.Annotations> <local:CustomTextAnnotation X1="2" Y1="250" Content="{Binding}" ContentTemplate="{StaticResource annotationTemplate1}"/> <local:CustomTextAnnotation X1="0" Y1="150" Content="{Binding}" ContentTemplate="{StaticResource annotationTemplate2}"/> </chart:SfChart.Annotations> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis/> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis Interval="50"/> </chart:SfChart.SecondaryAxis> <chart:ColumnSeries ItemsSource="{Binding Products}" Palette="Metro" XBindingPath="Name" YBindingPath="Range"> </chart:ColumnSeries> </chart:SfChart> </Grid> </Window> ConclusionI hope you enjoyed learning about how to bind the content template of TextAnnotation in WPF Chart (SfChart).You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
