How can I draw a custom bracket above selected columns in an SFCartesianChart after PaletteBrushes are updated?
Hi Marcel,
We can add custom annotations at the required position using ViewAnnotation. For more details, please refer to our UG documentation here: Annotations in .NET MAUI Chart control | Syncfusion
Additionally, we have attached a demo and a runnable sample to help you implement this functionality in your application.
Hope this helps you achieve your requirements.
Regards,
Fathima M
Attachment: ChartAnnotationSample_c91b3adc.zip
Hi,
Thanks, I don't think this is what I am searching for but I will give it a try.
I want to achieve this, the lines that are drawn with the text above:
Hi Marcel,
Thank you for your update.
To render the average text above the selected segment, you can use Shape Annotations. By utilizing data point selection, the corresponding segment index can be identified and updated either through a button click or through touch interaction. When using touch, the SelectionChanged event can be handled to apply the similar logic used for button‑based selection.
We have shared the button click event code snippet and the output image for your reference. With these values, you can also draw a Line Annotation to achieve the bracket‑style line based on your requirements.
[C#]
private void Button_Clicked(object sender, EventArgs e) { var indexesToSelect = new List<int> { 5, 6, 7 }; PriceSeries.SelectedIndexes?.Clear();
foreach (var idx in indexesToSelect) PriceSeries.SelectedIndexes?.Add(idx);
PriceSeries.SelectionBrush = Colors.Gold; var selectedPrices = indexesToSelect .Where(i => i >= 0 && i < viewmodel.Data.Count) .Select(i => viewmodel.Data[i].Price) .ToList();
double averagePrice = selectedPrices.Average(); int minIndex = indexesToSelect.Min(); int maxIndex = indexesToSelect.Max(); var fromHour = viewmodel.Data[minIndex].Hour; var toHour = viewmodel.Data[maxIndex].Hour;
var AvgText = new RectangleAnnotation() { Text = $"Avg {fromHour:HH} – {toHour:HH} = {averagePrice:0.##}", Fill = Colors.Black, X1 = fromHour, X2 = toHour, Y1 = averagePrice, Y2 = averagePrice + 6, CoordinateUnit = ChartCoordinateUnit.Axis, LabelStyle = new ChartAnnotationLabelStyle { TextColor = Colors.White, FontSize = 12, } };
chart.Annotations.Add(AvgText); }
|
Regarding the bracket‑style lines you want to display, this can be achieved using Line Annotations. Syncfusion provides built‑in support for adding arrow markers (or bracket‑like visuals) to vertical and horizontal line annotations. You can refer to the official documentation below for detailed guidance:
- Selection Events in .NET MAUI Chart control | Syncfusion
- Shape Annotations in .NET MAUI Chart control | Syncfusion
Please review the sample and documentation and hope this helps you achieve your requirements.
Regards,
Vallarasu R
Attachment: ChartSample_52bbdb47.zip
Hi,
I have tried using RectangleAnnotation and I am wondering if there is a way to prevent the label from disappearing in non-visible areas (see pictures). Or do I need to switch the CoordinateUnit to Pixel and calculate everything myself?
Hi Marcel,
Thank you for the update, and We glad to hear that option 2 worked for you. We appreciate your feedback as well that having a dedicated “rendered” or “layout updated” event would definitely make scenarios easier, but we can also achieve with custom annotation class.
Regarding the behavior you observed: the built‑in TextAnnotation gets clipped whenever it moves outside the chart’s visible plot area. Because of this, the label can disappear when positioned beyond the chart bounds.
To avoid this, you can override the Draw method and implement your own custom rendering logic. This approach lets you fully control how and where the annotation is drawn, ensuring it stays visible even when the annotation moves outside the default plot area.
[C#]
private void Button_Clicked(object sender, EventArgs e) { var indexesToSelect = new List<int> { 0,1, 2 }; --------------- ---------------- var AvgText = new CustomTextAnnotation() { Text = $"Avg {fromHour:HH} – {toHour:HH} = {averagePrice:0.##}", // store the data index so CustomTextAnnotation can compute a pixel X DataIndex = indexesToSelect[1], // used middle index for better centering of label X1 = fromHour, Y1 = averagePrice, CoordinateUnit = ChartCoordinateUnit.Axis, LabelStyle = new ChartAnnotationLabelStyle { TextColor = Colors.White, FontSize = 18, Background = Colors.Grey } };
// assign the owning chart so the annotation can reference series bounds when drawing AvgText.OwnerChart = chart; chart.Annotations.Add(AvgText); } |
// Custom annotation class public class CustomTextAnnotation : TextAnnotation { public SfCartesianChart? OwnerChart { get; set; } public int? DataIndex { get; set; } protected override void Draw(ICanvas canvas, RectF dirtyRect) { // Add drawing logic } } |
Our chart annotations support complete custom drawing through the Draw override, and we’ve prepared a sample using a CustomTextAnnotation class that inherits from TextAnnotation. In this sample, the annotation text automatically adjusts and stays positioned within the series bounds, preventing clipping or disappearance.
For reference, here is the documentation on overriding the draw method:
TextAnnotation Methods- MAUI API Reference | Syncfusion
Using this approach, you can maintain label visibility consistently, regardless of its position. We’ve also included the sample and its output for your convenience.
Regards,
Vallarasu R
Attachment: CustomAnnotationSample_c7458034.zip
