1. Home
  2. Forum
  3. Flutter
  4. Help with edge-to-edge chart

Help with edge-to-edge chart

I'm having a little bit of trouble with the x-axis tick/labels on an edge-to-edge chart. Is there a way to do one of the following on a chart that allows for panning? Or maybe something else entirely that may help with this use case?

  1. Apply plotOffset to only the right side
  2. Shift the layout of the x-axis to the left
  3. Prevent x-axis ticks/labels from choosing to layout close to the edge

I tried "edgeLabelPlacement: EdgeLabelPlacement.hide" but it removes the edge that wasn't clipping as well, and leaves the ticks.

Two images here, one showing the "EdgeLabelPlacement.hide", and one showing the clipping and uncentered x-axis layout I'm looking to avoid: https://imgur.com/a/VJp6p5d

Thank you!

7 Replies
YG Yuvaraj Gajaraj Syncfusion Team July 12, 2022 04:35 PM UTC

Hi Cory,


Greetings from Syncfusion. We have checked the reported issue regarding when the edgeLabelPlacement is hide the unclipped axis label also gets hidden and ensured the issue gets reproduced at our end. In previous we have considered the first and last labels are edge labels and hide them, now we will consider the clip area and fix based on this. We consider this a bug, and it will be included in our upcoming weekly patch releases on 19th July 2022. We appreciate your patience until then.



Regards,

Yuvaraj.


CD Cory Davis July 12, 2022 05:02 PM UTC

Hi there,

This is great news, thank you! I'm very excited! :)


Thanks again,
Cory


YG Yuvaraj Gajaraj Syncfusion Team July 13, 2022 12:08 PM UTC

Hi Cory,


Thanks for the update, we will let you know once the release got roll out. We appreciate your patience until then.


Regards,

Yuvaraj.


YG Yuvaraj Gajaraj Syncfusion Team July 15, 2022 08:16 PM UTC

Hi Cory,


Here is the feedback for the bug fix, you can track the status of the bug here. Please find the link below.


Feedback: https://www.syncfusion.com/feedback/36368/need-to-hide-edge-axis-label-based-on-the-clip-area


Regards,

Yuvaraj.


YG Yuvaraj Gajaraj Syncfusion Team July 20, 2022 02:00 PM UTC

Hi Cory,


We regret the inconvenience. When our development team moves forward to fix the issue, this is the behavior i.e if the edge label placement is set as hide, then by default, the first and last label will be hidden whether the labels move out of the bounds or not and this can’t be changed. When the plot offset is applied, it will be added at both the edges of the axis and unable to add at one side alone. And if you wish to move the axis to the opposite position, you can make use of the opposedPosition property in the axis.


And in your case the last label in the x-axis moves out of the layout, in this case, you can use the shift option in the edgeLabelPlacement, this will shift the first and last labels.

If the labels get intersect, then you can position the axis label smartly using the labelIntersectAction feature. More information can be found below


https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#smart-axis-labels


Also, if you wish to rotate the axis labels by default, then you can make use labelRotation property and set this to 90, this will avoid moving the last label out of the layout.


https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-rotation


Hope this helps.


Thanks,

Yuvaraj.


CD Cory Davis July 22, 2022 09:22 PM UTC

Hey Yuvaraj,

I appreciate the assistance!

But, unfortunately none of these configuration options help with the edge-to-edge chart use case, because they do not change the horizontal position of the end axis tick and label.

To move things along for our company, I implemented a draft feature:

https://github.com/CoryADavis/flutter-widgets/compare/master...CoryADavis:flutter-widgets:Introduce-edgeLabelPlacement.hideEnd

Essentially, just a new enum option for edgeLabelPlacement; whether the labels move out of bounds or not, it only hides the end label instead of the start and end label. The example now looks like this using edgeLabelPlacement.hideEnd: https://imgur.com/gtSejDb, which works for us.

Thanks,
Cory


YG Yuvaraj Gajaraj Syncfusion Team July 25, 2022 01:47 PM UTC

Hi Cory,


We have considered this as a feature request, and we have logged the feedback for this. We will implement this and include it in any of our upcoming releases. We have attached the feedback below for your reference, here you can track the status of the feature.


Feedback: https://www.syncfusion.com/feedback/36567


Regards,

Yuvaraj.



Loader.
Up arrow icon