Issue with BorderRadius on ColumnCharts + SwiftUI Charts Equivalent Examples

Hello,

With the latest release of SwiftUI in iOS16, Apple have released some standardised chart styles.

You can see examples here:

https://github.com/jordibruin/Swift-Charts-Examples

I am trying to mimic them using SfCartersianCharts but am running into a few road blocks.



When creating an image like this, I am using a StackedColumnChart with the last index to have a borderRadius:


Image 1 ^

if you toggle one of the items off in the legend, you get square edges and I tried using the onLegendTapped but the borderRadius is immutable:


Image 2 ^

If you turned borderRadius on for all ChartSeries it looks stupid:


Image 3 ^

I am also noticing in Image 1 that there is a thin white line where the background is bleeding through between series creating a fake border between them, this exists on all types of stacked charts such as the StackedAreaChart:



Lastly, any chance you can show how to mimic all these swift charts using syncfusion, would be greatly appreciated? (https://github.com/jordibruin/Swift-Charts-Examples)


Thanks, keep up the great work.




3 Replies 1 reply marked as answer

YG Yuvaraj Gajaraj Syncfusion Team August 8, 2022 03:09 PM UTC

Hi Daniel,


We are checking your scenario, and we will update the status in one business day. We appreciate your patience until then.


Regards,

Yuvaraj.



YG Yuvaraj Gajaraj Syncfusion Team August 9, 2022 02:52 PM UTC

Hi Daniel,


Query 1: Regarding applying a border radius to the top of the visible series

We are trying to achieve your requirements at the sample level and will update further details in one business day.


Query 2: Regarding a thin white line between the segments

We can reproduce the reported issue at our end, and we are checking the issue at the Flutter framework level. We will update further details in one business day. We appreciate your patience until then.


Regards,

Yuvaraj.



YG Yuvaraj Gajaraj Syncfusion Team August 10, 2022 02:57 PM UTC

Hi Daniel,


Query 1: Regarding applying a border radius to the top of the visible series

 

Currently, we do not have direct support to set the border radius of the StackedColumnSeries based on the legend toggle. However, we have achieved your requirement at the sample level by having a list of series indices. In the onLegendTapped callback, we have added or removed the series index based on the toggling. At the same time, rebuild the chart to apply the border radius to the topmost StackedColumnSeries. We have shared the sample below for your reference.




Query 2: Regarding a thin white line between the segments

 

We found a similar issue reported on Flutter. In the issue report, the suggested workaround is not suitable for ours. You can follow up on the issue at the below link.


Issue link: https://github.com/flutter/flutter/issues/108528


Regards,

Yuvaraj.


Attachment: f176676_b2cf9fd.zip

Marked as answer
Loader.
Up arrow icon