Donut Chart with donut radius not rendering correctly (hole in centre is filled when should be empty)

[arniigreat1]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

Donut chart with empty space in centre (Donut Hole) with "percent" section label when 100% has filled centre when should be empty. See two screen shots. The empty space should be what's shown, not a filled circle.

This was not an issue before until this latest version. Hope it's a quick fix as just got approved by app store to go live! :D

Expected Behavior

Donut chart should have empty space in centre when 100%

Steps to Reproduce

1. Add Donut Chart
2. Set "Donut Hole" Radius to 45
3. Set "Section Label Type" Percent
4. Set Data Source as "Single Value"
5. Start Test
6. Donut Chart will be complete pie (no hole)

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITESz/Hqx89gotcE7ZD+LPlAhR8kQ2InarsvhMB9Zww3Jb7oELMlbuvRXGZZZsezYWx6B06lkjoy0db2vdnXDPE5CzuEQ5Q/1ZFcQwL/VkauMpizCpCJdXQkONJTGnKb1p7UpiNAJsZfSE0tig/GSw==

Visual documentation

Environment

- FlutterFlow version: v4.1.63+
- Platform: MacOS Desktop
- Browser name and version: Chrome 126.0.6478.115 
- Operating system and version affected: macOS  Sonoma 14.3

Additional Information

No response

[msusviela]

I was able to reproduce the issue. I could reproduce it on test mode, however, when run into a local emulator it looked fine. Did you experience the same?

I will send it to the ENG team so they can work on this!

[msusviela]

Hi @arniigreat1.
I just got an update from the ENG team.
It looks like this is because test mode is still using the html renderer. This issue will not happen when you actually publish their app. For web publishing, you need to check use canvaskit for rendering the web app (if you're using web, mobile should not have issues).

[arniigreat1]

Hi @arniigreat1.I just got an update from the ENG team.It looks like this is because test mode is still using the html renderer. This issue will not happen when you actually publish their app. For web publishing, you need to check use canvaskit for rendering the web app (if you're using web, mobile should not have issues).

hey @msusviela I published the app on internal testing on android as well before submitting. And the issue is still the same

I provided a simple example for repeating the issue. But in reality the data is dynamic. For example, there's 2 list items, (1) with 100% and (2) with 0%. I think the issue may be because there's 100% for one item, and the remaining items are 0%.

Attached more screenshots, and what I see on my android. You can see there's a difference in color in the donut centre actually, which is telling me this may be a slightly different issue actually. This all wasn't a problem till recently

Let me know your thoughts, and appreciate the prompt response :)

[arniigreat1]

@msusviela checking in on above. The newer versions, the graphs don't appear when it's 100% instead of a full filled circle