I'm working on an application that uses SfChart line chart to display live data (updated a few times per second). Number of points and their X-values are constant. Y-values of points can only be positive (including 0). So on each update only Y-values of points change. Both X-axis and Y-axis are numeric.
On each update, the maximum value of the Y-axis is recalculated to fit the screen, which makes the graph "jump" a few times per second. It is unreadable for user to watch jumping chart. I want Y-axis to be more stable. E.g. some behavior like this:
1. If max Y of last update is bigger than current max of y-axis, resize y-axis (we want to show whole chart, not cut some part of it)
2. If max Y of latest update is SLIGHTLY smaller than current max of Y axis, do nothing (if chart fills e.g. 70% of screen, it's ok for readability, we don't want to resize it)
3. If max Y of latest update is SIGNIFICANTLY less than current max of y-axis, resize y-axis (if chart fills e.g. 20% of screen, we want to resize y-axis to fill all screen)
I could look for maximum Y value on every update and set YAxis.Maximum manually in my business logic, but I want to avoid this for performance reasons. Is it possible to achieve the described behavior with mechanisms built in SfChart library?
I tried to use YAxis.ActualRangeChanged but I couldn't get the behavior from point 3 (I couldn't find a way to get the small value that chart wants to fit to).
Thank you for suggestions how to solve my problem.
We are validating your query and update today EOD
You can achieve your desired result by setting the RangePadding property to AppendInterval
for a numerical axis. This will update the Y-axis range automatically, and the chart will become visible. In below attached the document for reference: https://help.syncfusion.com/xamarin/charts/axis
I hope this helps!
Hi Sowndharya Selladurai,
Is it possible to increase the size of appended interval? It looks better with RangePadding set to AppendInterval than to None, but I want to resize chart when current max Y value of data is significantly lower than Y axis max value. The RangePadding option gives me too little margin.
To set RangePadding to AppendInterval, the chart automatically adds an interval to the end of the Y-axis range. The size of this interval is determined by the chart y-axis interval property.
If you want to increase the size of the appended interval, you can increase the value of the y-axis interval property. However, this will also increase the distance between each tick mark on the Y-axis and will also give a margin.
Hi Sowndharya Selladurai,
thank you for your reply. Is it possible to set Interval as relative value, not direct? If I set it to 1 and want to plot signal of amplitude 10^-3, Y axis range is too big. On the other hand, If I have signal with amplitude 1000, Interval of 1 does not change anything.
I understand that the axis labels count remains fixed even if the range goes beyond any predefined limit. For example, if the signal has an amplitude of 10^-3, the y-axis displays 10 labels. The same count  should be shown for a signal with an amplitude of 1000. This approach ensures that there are no significant jumps in the chart when it is regenerated.
Please let me know if I have correctly understood your concern, or if you have any further feedback.
I set Y Axis RangePadding property to AppendInterval and Interval property to 1. The problem is that my chart shows data that can have different amplitudes. It can show signal with amplitude 10^-3 or 100.
If it shows signal with small amplitude (which varies from e.g. 2 * 10^-3 to 2.5 * 10^-3 between refreshes), the chart looks like on the screenshot. The y-axis is scaled to 2 and the data is displayed as a tiny line at the bottom.
On the other hand, if I load data with high amplitude, the chart would jump, because appending 1 doesn't matter when values vary between e.g. 100 and 110.
That's why I would like to make appended margin size relative to amplitudes of signal (something similar to algorithm I described in post).
We are validating your query and will be discussing it with our team. We will update our response shortly. Thank you for your patience.
To update the Y-axis interval based on the values being displayed, we used the ActualRangeChanged event. When this event is triggered, we retrieve the actual minimum and maximum values of the Y-axis and calculate the difference between them. We then divide this difference into 10 equally sized intervals and set this delta value as the new Y-axis interval.
This approach ensures that the Y-axis interval is always adjusted based on the range of values being displayed. Whenever the Y-axis values change, the interval is automatically updated to provide a more appropriate visualization of the data.
<chart:NumericalAxis x:Name="secondaryAxis" RangePadding="AppendInterval" ActualRangeChanged="NumericalAxis_ActualRangeChanged"/>
private void NumericalAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e)
var min = e.ActualMinimum;
var max = e.ActualMaximum;
var delta = (double)(max) - (double) (min)/10;
secondaryAxis.Interval = delta;
I hope this helps! Let me know if need further assistance.