How to add benchmark line in Xamarin.Forms Chart?
You can represent a benchmark line in a Xamarin.Forms Chart using the annotation feature and set the target value to the Y1 position of HorizontalLineAnnotation. For example, the target value has been set to 62 in the following data.
My data look like this:
S.No | XValue | YValue |
1 | Group A | 50% |
2 | Group B | 60% |
3 | Group C | 70% |
Target Value: 62%
The following code demonstrates how to add benchmark line in a chart using the annotation feature and you can download the complete sample here.
XAML:
<chart:SfChart>
…
<chart:SfChart.Series>
<chart:ColumnSeries ItemsSource="{Binding SeriesData}" XBindingPath="XValue" YBindingPath="YValue">
<chart:ColumnSeries.DataMarker>
<chart:ChartDataMarker>
<chart:ChartDataMarker.LabelStyle>
<chart:DataMarkerLabelStyle LabelPosition="Inner" LabelFormat="0'%'" />
</chart:ChartDataMarker.LabelStyle>
</chart:ChartDataMarker>
</chart:ColumnSeries.DataMarker>
</chart:ColumnSeries>
</chart:SfChart.Series>
<chart:SfChart.ChartAnnotations>
<chart:HorizontalLineAnnotation Y1="62" Text = "Benchmark" StrokeColor="Orange" StrokeWidth = "6">
<chart:HorizontalLineAnnotation.LabelStyle>
<chart:ChartAnnotationLabelStyle Font="12" HorizontalTextAlignment="Start" VerticalTextAlignment="End"/>
</chart:HorizontalLineAnnotation.LabelStyle>
</chart:HorizontalLineAnnotation>
</chart:SfChart.ChartAnnotations>
</chart:SfChart>
C#:
SfChart chart = new SfChart(); … ColumnSeries series = new ColumnSeries(); series.ItemsSource = view.SeriesData; series.XBindingPath = "XValue"; series.YBindingPath = "YValue"; series.DataMarker = new ChartDataMarker(); series.DataMarker.LabelStyle = new DataMarkerLabelStyle(); series.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Inner; series.DataMarker.LabelStyle.LabelFormat = "0'%'"; chart.Series.Add(series); HorizontalLineAnnotation horizontalLine = new HorizontalLineAnnotation(); horizontalLine.Y1 = 62; horizontalLine.Text = "Benchmark"; horizontalLine.StrokeColor = Color.Orange; horizontalLine.StrokeWidth = 6; horizontalLine.LabelStyle = new ChartAnnotationLabelStyle(); horizontalLine.LabelStyle.Font = Font.SystemFontOfSize(12); horizontalLine.LabelStyle.HorizontalTextAlignment = ChartAnnotationAlignment.Start; horizontalLine.LabelStyle.VerticalTextAlignment = ChartAnnotationAlignment.End; chart.ChartAnnotations.Add(horizontalLine);
ViewModel:
public class ViewModel
{
public ObservableCollection<Model> SeriesData
{
get;
set;
}
public ViewModel()
{
SeriesData = new ObservableCollection<Model>();
SeriesData.Add(new Model { XValue = "Group A", YValue = 50 });
SeriesData.Add(new Model { XValue = "Group B", YValue = 60 });
SeriesData.Add(new Model { XValue = "Group C", YValue = 70 });
}
}
Conclusion
I hope you enjoyed learning about how to add benchmark line in Xamarin.Forms Chart.
You can refer to our Xamarin.Forms Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Charts 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!
