How to make sure the axis sizes are proportionate on a NumericalAxis?

Question

I'm using a ScatterSeries with SFChart to plot an X/Y position graph of where golf balls land. Because it represents a 2D overhead view of real space, I do not want the axes to scale. Because if the axes scale, it could skew the appearance so the height is larger than the width, stretching the view such that the intervals size on one axis won't be proportionate to the interval on the other axis. I could declare max and min values on the Axis, which would be ok, except because xamarin forms is cross platform, and I want the chart to fill the device width and height, which will vary.

Also challenging this, the center point of the bottom Axis must be 0, with negative and positive values. (negative values are to the left of the tee, positive values to the right). I can accomplish this by setting a static Max and Min values on that axis, but it will still stretch out depend on the form factor of the device.

Basically, I would like the charts to scale in a way that retains the proportion of the Axis. so I am fine if the charts add an additional 50 to the render of the chart on either axis to compensate for the phone's width, but want to make sure the axis stay in proportion if possible.

Devakumar Dhanapoosanam · Answer

Hi Ed,Query: intervals size on one axis won't be proportionate to the interval on the other axis. I would like the charts to scale in a way that retains the proportion of the Axis.We have analyzed your query and we suspect that your requirement is to show X and Y axis scale with the same interval counts/labels and axis scale proportional with each other.We would like to let you know that we can achieve your requirement by extending the NumericalAxis and customizing the axis VisibleLables collection using the OnCreateLabels override method axis for both axis with any interval as per in the below code example. public class CustomNumericAxis : NumericalAxis { protected override void OnCreateLabels() { base.OnCreateLabels(); if (VisibleLabels != null) { VisibleLabels.Clear(); //Considered that we need 5 labels. so divided by 5. var interval = (VisibleMaximum - VisibleMinimum) / 5; var start = VisibleMinimum; while (start <= VisibleMaximum) { VisibleLabels.Add(new ChartAxisLabel(start, start.ToString()));//Set label format if needed. start += interval; } } } } … Please refer the below link for more detailshttps://www.syncfusion.com/kb/12520/how-to-set-the-count-of-visible-axis-labels-in-xamarin-forms-chartsAlso, we would like to suggest that we can customize the axis range, offset, interval by using the axis RangePadding, PlotOffset and Interval property.Please refer the below link for more details.https://help.syncfusion.com/xamarin/charts/axis#apply-padding-to-the-range https://help.syncfusion.com/xamarin/charts/axis#offset-the-rendering https://help.syncfusion.com/xamarin/charts/axis#customizing-numeric-interval https://www.syncfusion.com/kb/5926/how-to-display-the-modified-axis-labels-in-xamarin-forms-chartshttps://www.syncfusion.com/kb/12519/how-to-add-custom-axis-label-in-xamarin-forms-charts https://help.syncfusion.com/xamarin/charts/axis#labelformathttps://www.syncfusion.com/kb/11289/how-to-customize-the-axis-label-format-based-on-the-culture-in-xamarin-forms-chart-sfchart We hope the above solution helps to achieve your requirement. Incase if you still face any problem with above solution could you please share more details of the requirement with an example which will be helpful to provide you better solution at the earliest.Please let us know if you need any further assistance.Regards,Devakumar D