Series Last value Label on Y Axis
In SfCartesianChart for any series especially for Line, Column and/or Financial i.e CandleStick Is possible to show last value of the Series on Y Axis to the Right
I was able to make the Axis show on the Right side
CrossesAt="{Static x:Double.MaxValue}"
Is is possible to show last value of the series to see on Y Axis?
Example screenshot here
Hi Praveen,
We would like to
let you know that there is an option to display the last value of a series on
the Y-axis in the SfCartesianChart.
This can be achieved by using a HorizontalLineAnnotation
with its axis label. To accomplish this, we initialize a property in the ViewModel to hold the last value of the series' data collection and bind that
property to the Y1
property of the HorizontalLineAnnotation.
It supports both load and dynamic time.
By using this method, you can customize the display of the last value according to your needs. Below, we have attached a code snippet and a video demonstrating for your reference:
|
public class ViewModel : INotifyPropertyChanged { private double _lastYValue; public double LastYValue { get => _lastYValue; set { if (_lastYValue != value) { _lastYValue = value; OnPropertyChanged(nameof(LastYValue)); } } } public ObservableCollection<Model> Data { get; set; }
public ViewModel() { // your Data collection Data.CollectionChanged += Data_CollectionChanged; UpdateLastYValue(); }
private void Data_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) { UpdateLastYValue(); }
private void UpdateLastYValue() { if (Data.Any()) { LastYValue = Data.Last().YValue; // Assign the last YValue } } |
|
<chart:SfCartesianChart.Annotations> <chart:HorizontalLineAnnotation Y1="{Binding LastYValue}" ShowAxisLabel="True"> <chart:HorizontalLineAnnotation.AxisLabelStyle> <chart:ChartAxisLabelStyle Background="Orange"/> </chart:HorizontalLineAnnotation.AxisLabelStyle> </chart:HorizontalLineAnnotation> </chart:SfCartesianChart.Annotations> |
We hope this helps. If you need any further assistance or concerns, feel free to ask.
Regards,
Nitheeshkumar.
Attachment: HorizontalAnnotation_cfe63c0.zip
I was able to use the suggest option is display Last value with Transparent Stroke on Horizontal Line.
1)
I have more request is it possible use Y1="{Binding LastYValue}" but display a different Value in Axis Label
ex: LastValue from ViewModel to display label at correct Y Axis position but display a different Value?
2)
One minor workaround would be great when the HorizontalLine can be send behind the other chartSeries such that it does have gaps in drawing the Chart due to Transparent Stroke
Query 2 : Attached examples works fine. Thank you
Query1: In the Sample code attached, the last value of 20 in orange label is at show at Y Axis Value 20.
We would like to customize the text displayed in the label example 20 (5%) i.e. Custom Text from Binding of different property but Y Axis at which text( eg: 20 5%) will be shown will still be at 20 i.e. based on Y1 Binding Value
Mock up screenshot -
Hope this clarifies
Please let me know
thanks
Hi Praveen,
We have analyzed your requirement and are pleased to inform you that you can achieve it by using the LabelFormat property in ChartAxisLabelStyle. We have prepared a sample for you, which you can review for further details.
Here’s a code snippet for XAML:
<local:SfCartesianChartExt.Annotations> <chart:HorizontalLineAnnotation Y1="{Binding LastYValue}" ShowAxisLabel="True" Stroke="Transparent" > <chart:HorizontalLineAnnotation.AxisLabelStyle> <chart:ChartAxisLabelStyle Background="Orange" LabelFormat="{Binding Label}" /> </chart:HorizontalLineAnnotation.AxisLabelStyle> </chart:HorizontalLineAnnotation> </local:SfCartesianChartExt.Annotations> |
ViewModel code snippet:
public class ViewModel : INotifyPropertyChanged { public double Percentage = 5; // Modify the value as you requirement public int DataCount = 300000; private readonly Random randomNumber;
private double _lastYValue; public double LastYValue { get => _lastYValue; set { if (_lastYValue != value) { _lastYValue = value; OnPropertyChanged(nameof(LastYValue)); } } }
public string Label => $"{LastYValue} ({Percentage}%)"; } |
Output Image:
If you need further assistance or have any questions, feel free to reach out.
Thank you for your patient and understanding.
Regards,
ARUL JENITH B.
Attachment: CustomViewSample_80999525.zip
