Same (distance) scale on both x and y axes for ScatterChart

[Oliver]

Hi,

I'm trying to display a scatter plot so that the X and Y axes have the same distance between each of the major ticks (i.e. so that a circle plotted across both axes is a circle, not an oval). However I'd like to ensure that the plot fills the screen which inevitably means more of the X or Y axes will be shown depending on whether it's portrait or landscape.

I've only found that I can set the maximum and minimum values for the X and Y axes using SfCharts, which is fine if the plot is square, but when it's oblong (like the screen), the scale and X and Y axes differs.

Is there a way to set SfCharts so that it will always use the same distance scale on each axes, if necessary displaying more of horizontal or vertical axis if required?

Thanks,

Oliver.

[Yuvaraj Palanisamy]

Hi Oliver,

We are checking the possibilities to achieve your requirement and we will update you with complete details or sample in two business days (23^rd February, 2022).

Thanks,

Yuvaraj.

[Yuvaraj Palanisamy]

Hi oliver, 

 

We have achieved your requirement “Same distance between the major ticks for X and Y axis” by workaround with the help of calculating the Interval property based on the Visible range of corresponding axis along with Portrait and landscape orientation.  

 

Also, we have attached the complete sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173023/ze/SfChart_GidLine_Distance1352853592  

  

Output:  

 

 

 

If this is not meet your requirement, could you please share us the more details about your exact requirement with pictorial representation which will be helpful to provide the better solution at the earliest. 

 

Regards, 

Yuvaraj. 

[Oliver]

Hi,

Thank you very much for your help and feedback.

However, this isn't quite what I was after (but thank you for your help!). 

What I'd like ideally is for the actual values on each axis are the same distance on each axis, so for the example you've provided, the following would be displayed - e.g. if 18.2 if the maximum length space available on the x axis (although I can see you could fit a bit more in), that value would be the same distance up on the y axis, plus any additional space available.

I've added example values in red on the attached.

Does that make sense?

All the best,

Oliver.

Attachment: graph.jpg_e0311909.zip

[Manivannan Elangovan]

Hi Oliver,

Sorry for the misunderstanding. We have achieved your requirement with the help of changing the Height and Width request of the chart in series rendered event. Also, we have attached the modified sample for your reference.

Output:

Note: If the chart title or legend is used in the chart, we must manually set an additional height or width dependent on the title or legend size.

Thanks,

Manivannan E

Attachment: SfChart_GidLine_Distance_466dabc6.zip

[Oliver]

Hi Manivannan,

Thank you for your note - however again this isn't quite what I'm trying to achieve. I've drawn the attached diagram to show in more detail. I've included an annotated version of your example, and also a screenshot from my app.

In particular

1. The axes should fill the screen - so in your example, when the iPad is in horizontal orientation, the Horizontal axis should be extended to fill the whole screen. Likewise in portrait orientation, the vertical axis should be extended to fill the screen
2. The vertical and horizontal axes should display the same value of points per distance shown on the screen. So, for example, in your example, if you can only get 20 points up the vertical axis, the horizontal axis should be scaled so 20 is the same distance to the origin as on the vertical axis. This basically means, in my example attached, if you were to plot a circles on the axes, it would not appear "squished" as both axes are using the same scale on the screen.

I do appreciate your help with this matter. Thank you so much for your help.

Do please let me know if it's not clear.

Kind regards,

Oliver.

Attachment: Archive_1c2cdda0.zip

[Yuvaraj Palanisamy]

Hi Oliver,

 

We will check and provide the feasible solution by tomorrow 1^st March, 2022.

Regards, 

Yuvaraj. 

[Yuvaraj Palanisamy]

Hi Oliver, 

We have achieved your requirement with the help of setting value for Maximum property of ChartAxis based on the chart width and height as per the below code example. 

CodeSnippet: 

protected override void OnSizeAllocated(double width, double height) 

 { 

     base.OnSizeAllocated(width, height); 

     if (actualMaximum == 0) 

         return; 

     UpdateRange();             

 } 

 

 void sfChart_SeriesRendered(System.Object sender, System.EventArgs e) 

 { 

     actualMaximum = primaryAxis.VisibleMaximum; 

     UpdateRange(); 

 }       

  

 void UpdateRange() 

 { 

     var chartWidth = sfChart.Width; 

     var chartHeight = sfChart.Height; 

     if (chartHeight > chartWidth) 

     { 

         primaryAxis.Maximum = actualMaximum; 

         secondaryAxis.Maximum = actualMaximum * chartHeight / chartWidth; 

     } 

     else 

     { 

         secondaryAxis.Maximum = actualMaximum; 

         primaryAxis.Maximum = actualMaximum * chartWidth / chartHeight; 

     } 

 } 

 

Also, I have attached the sample. Please find the sample from the below link and let us know if you have any further assistance 

 

Sample: https://www.syncfusion.com/downloads/support/forum/173023/ze/ChartSample659599886  

Output:

Portrait: 

 

 

Landscape: 

 

Please let us know if you have any further assistance. 

Regards, 

Yuvaraj. 

[Oliver]

Hi,

Thank you very much for your reply - I'll check this out over the next week.

Oliver.

[Yuvaraj Palanisamy]

We will wait until we hear from you.