Doughtnut: how to make the background center transparent ?

[soragXYZ]

Hello, thanks for maintaining this fork, really appreciate it !

Is is possible to make the background center of the doughtnut transparent ?

I have successfully managed to make the exterior transparent using theme and .WithBackgroundColor(charts.ColorTransparent), but I can't find anything for the interior.

Do you have any idea ?

Thanks again !

[jentfoo]

Thank you for raising the question! However this may be a feature request, as currently the doughnut center can not be transparent.

When implementing the doughnut chart I considered rendering the segments such that the center was never drawn (allowing for an easy transparent center). However to reduce code duplication, and due to other complexities, I decided to instead render a pie chart and then fill in the center with the background color.

Because of that, it's not currently possible to have the center be transparent. If the theme background has an alpha transparency, we make it fully opaque so that the pie slices underneath are not visible.

@soragXYZ I assume you're trying to create a doughnut chart with a large center so that you can show a custom image or element? If so, is there a reason the doughnut chart needs to be overlayed on top of whatever you want in the center (instead of putting your center element on top of the doughnut chart)? I just want to make sure I understand your use case correctly. Thank you!

[soragXYZ]

Thanks for your reply @jentfoo

For more context:
I'm currently building a GUI using Fyne. The Fyne toolkit is very limited for graphs (in fact you can only draw lines, circle... only basic figures).
My workaround is to draw a graph using your lib, import it as PNG in Fyne and then display it. This way I'm not limited by Fyne toolkit and it's waaaay more easier and quicker to draw nice graphs.

In my GUI, the doughnut is just here to display some visual hint about some data.
Actually, I don't even need a legend for the graph, because the legend is displayed manually in my app (to fit well with the font)

I don't really need to have something in the center, it's just that in my app the background color can be modified in the user settings, so if the background is dark, the graph isn't pretty because the center is not transparent

Also, when I use .WithLabelTextColor(charts.ColorTransparent), the whole text becomes transparent, but some lines in the center are not, as you can see here, and I think they should !

[jentfoo]

Thank you for the details @soragXYZ, this is super helpful for me!

Are you able to know what the UI background is before rendering the chart? Our themes can be customized so that the center can be specified to be any color of your choosing. The center will match the background color, that said I see now that if the alpha is fully transparent we always make it white. If it would be helpful we could allow a fully transparent different color, which we just make opaque for the center (that way the background can be transparent while still being able to control the center color).

Also, when I use .WithLabelTextColor(charts.ColorTransparent), the whole text becomes transparent, but some lines in the center are not, as you can see here

Feel free to open another issue as a feature request. I think it could make sense to make it controllable by both mechanisms. Currently this behavior is currently controlled by disabling at the series label level.

Assuming you're using the Painter API and have the charts.DoughnutChartOptions referenced as opt, this would look like:

	for i := range opt.SeriesList {
		opt.SeriesList[i].Label.Show = charts.Ptr(false)
	}

Let me know your thoughts when you get a chance, thank you!

[soragXYZ]

Are you able to know what the UI background is before rendering the chart?

I think it's possible for me yes, but it's not really convenient

for i := range opt.SeriesList { opt.SeriesList[i].Label.Show = charts.Ptr(false) }

Working like a charm, thanks! 😄

[jentfoo]

@soragXYZ I just pushed tag v0.5.11 (debcc29)

This will only make the center white if the background is completely zero / unset. I would recommend setting a theme with the background color to match the background being rendered on, but then set the alpha to either 0 or 1 (1 would protected against a condition where RGB are all zero, but as long as RGB is at least 1 it can also be 0 for alpha). That will keep the background transparent, but fill the center with a color matching to your background.

I will keep this issue open to track being able to actually render a proper transparent center. If you have any more questions, or requests, feel free to open a new issue.

Thank you!