Issues with sizing and aligning charts

[Aaron Vance]

Query 1

I am charting latitude and longitude values on a standard chart to show a racetrack outline.

Depending on where in the world the track is the chart has to be scaled to make it look correct. I am doing this calculation and then using an AspectRatio widget to create this scale.

The problem I am experiencing is that the chart is not filling the parent. The documentation states:

Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget.

I have added a red background colour to show the size of the AspectRatio widget to show the size of it in syncfusion_chart.png and other_library.png.

You can see that in syncfusion_chart.png that the chart is filling the width but not the height. I would expect the same behaviour that is seen in other_library.png. Is there a way to make this happen? If you turn on the chart border you can see it fills the AspectRatio widget, example in clipping_border.png

Query 2

The line for this chart is getting slightly clipped on the width, its easier to see bottom left, but is also happening top right. Can see this in clipping_no_border.png. I then added the border which shows it clearer and this can be seen in clipping_border.png. Can this be fixed?

Query 3

Is there a way to size multiple charts to be the exact same size? I have a Column of 3 Expanded widgets, each containing a chart. In the image missaligned_due_to_y_axis.png you can see that the bottom chart has slimmer Y axis labels causing the chart to be wider. The problem with this is that the trackball vertical lines do not align as the bottom chart isn't the same width. You can see in expected_alignment_other_library.png that using another library you can set the allowed space for the axis labels meaning you can keep all charts the same width. Is this possible with syncfusion?

Edit: Maybe there is a better way for having multiple charts on top of each other with the same X axis and different Y axis instead of having three individual charts like I have?

Attachment: images_db5a97c5.zip

[Preethika Selvam]

Hi Aaron,

 

We are validating your query at our end, and we will update further details in two business days within May 16, 2024. We appreciate your patience until then.

 

Regards,

Preethika Selvam.

[Lokesh Palani]

Hi Aaron,

Query 1: The chart is filling the width but not the height.

We would like to inform you that the series will be rendered based on the data points only. We still need more details about your requirement. Could you please provide the following information, which will be helpful for us to provide a solution sooner?

- What type of series is used in the SfCartesianChart?

- What type of axis is used in the SfCartesianChart?

- How many data points are used in the SfCartesianChart?

Query 2: The line for this chart is getting slightly clipped on the width.

We would like to inform you that, when the width of the series is 2, the width equally renders on both the left and right side of the segment. In your case, the datapoint is placed at the edge of the plot area. So, the half of the segment width get clipped. To resolve this issue, we suggest you set the half of the width value to the plotOffset in x-axis, it will add a padding between the series and the plot area. By using this, the series will render without clipping when it is close to the edge of the plot area. We have shared user guide documentation link for your reference.

UG Link,

https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#offset-the-rendering

Query 3: Is there a way to size multiple charts to be the exact same size.

We have validated the attached screenshot and noticed that the axis range was not same for third chart as in the first chart and second chart. To overcome this, we suggest you set the maximumLabelWidth in the Axis. By using this, axis label width will increase. We have shared an online sample link for your reference below.

Sample Browser link,

https://flutter.syncfusion.com/#/cartesian-charts/axis-features/maximum-width-for-labels

Regards,

Lokesh P.

[Aaron Vance]

Query1

While looking at all the available properties to see if I could fix query 3 I found that I was able to fix this by giving both axis a minimum value and a maximum value that is equal to the minimum and maximum value from the data points. Like this (same for the X axis):

primaryYAxis: NumericAxis(
  isVisible: false,
  plotOffset: plotOffset,
  minimum: 546202798,
  maximum: 546250881,
),

Ill answer the questions incase it is interesting for you:

The series is LineSeries<LatLong, int>. LatLong is just a class that stores the latitude and longitude as an int.

Uses NumericAxis.

About 1500 points.

Query2

This is exactly what I was looking for and fixed my issue, thank you!

Query3
Setting maximumLabelWidth to a large value doesn't increase the label width. It uses the max it needs for the label, meaning nothing changes. To fix it using this I would need to set the maximumLabelWidth to smaller than required for the top two, meaning that the labels would be clipped.

It would possibly be useful to include a minimumLabelWidth as well so that it would push the x axis further to the right on the bottom. This would also allow you to have a fixed size for the label width if you set minimumLabelWidth and maximumLabelWidth to the same value.

I was able to set the label rotation to 270 to temporarily fix this issue, but it would be nice to include minimumLabelWidth if you thought that was a useful addition :)

Thanks for all the help on this! The library is awesome and the support on here is great.

[Lokesh Palani]

Hi Aaron, 

Query 1 and Query 2:

We are happy to hear that the solution was found by yourself. If you have any further queries, please get back to us. We are always happy to assist you.

Query 3:

You can achieve your requirement by using the margin property in the SfCartesianChart. By using this, you can move the chart to the right. We have shared code snippet for your reference. Please let us know if you need any further assistance.

Code Snippet:

SfCartesianChart(

        margin: EdgeInsets.only(left: 10),

),

Regards,

Lokesh P.

[Bean Aaron]

@  Geometry Dash , Please wait patiently for your query validation information to be updated with further details in two business days. Validation period will be May 16, 2024.

[Lokesh Palani]

Hi Bean | Geometry,

We have already shared solution for your requirement on May 15, 2024. We kindly request you to check the provided details on May 15, 2024. Please let us know if you need any further assistance.

Regards,

Lokesh P.