We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Bug with SfCartesianChart legend wrap overlapping the chart

Hello,

There is a bug with the legend on SfCartesianChart with the wrap mode on.

If it just the right size, it can actually draw over the graph.

See image below, the legend is within the orange box.


SfCartesianChart(
plotAreaBorderWidth: 2,
plotAreaBorderColor: Colors.orange,
margin: const EdgeInsets.only(right: 0, left: 0, top: 5, bottom: 5),
legend: Legend(
isVisible: true,
overflowMode: LegendItemOverflowMode.wrap,
position: LegendPosition.top,
textStyle: const TextStyle(fontSize: 11),
// padding: 50,
orientation: LegendItemOrientation.horizontal,
width: '100%',
),



This is on MacOS.

Standard sfcartesian widgets.



3 Replies 1 reply marked as answer

YG Yuvaraj Gajaraj Syncfusion Team March 8, 2023 01:45 PM UTC

Hi Daniel,


We have checked the shared code snippet at our end and the issue is not reproduced at our end. The wrapped legends are showing in their area and not overlapped with the series. So, we kindly request you share more information about your chart code snippet. And we have also shared the sample below, please try to reproduce the reported issue in the shared sample and revert to us, so that it will help us assist you in a better way.


Screenshot:



Regards,

Yuvaraj.


Attachment: f180965_71392844.zip


DA Daniel April 12, 2023 09:58 PM UTC

Hello,

I finally figured out what is the issue.
I am using a Material3 theme using https://pub.dev/packages/flex_color_scheme and it causes the text to overlap. Going back to material2 fixed this.

final lightTheme3 = FlexThemeData.light(
scheme: FlexScheme.materialBaseline,
surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
blendLevel: 9,
subThemesData: const FlexSubThemesData(
blendOnLevel: 10,
blendOnColors: false,
),
visualDensity: FlexColorScheme.comfortablePlatformDensity,
useMaterial3: true,
swapLegacyOnMaterial3: true,
// To use the playground font, add GoogleFonts package and uncomment
// fontFamily: GoogleFonts.notoSans().fontFamily,
);



Marked as answer

LP Lokesh Palani Syncfusion Team April 13, 2023 09:39 AM UTC

Hi Daniel,


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.


Regards,

Lokesh.


Loader.
Up arrow icon