Transparent Background not working

[ErickSorto]

Adding Color.Transparent to

val donutChartConfig = PieChartConfig(
            backgroundColor = Color.Transparent, //transparent color
            strokeWidth = 120f,
            activeSliceAlpha = .9f,
            isAnimationEnable = true,
            labelVisible = true,
            labelColor = Color.Black,
            isEllipsizeEnabled = true,
            labelFontSize = 16.sp, 
            chartPadding = 16,
        )

        Column(
            modifier = Modifier
                .fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            DonutPieChart(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.Transparent),
                donutChartData,
                donutChartConfig
            )
            Legend(donutChartData.slices, listOfColor)
        }

Results in a black background behind the circle instead of a transparent background.

[mathklk]

I'm facing the same issue. I've set the background on a LineChart to transparent, but it renders as the background color instead of the composable that is actually underneath.

It seems to be a problem with the Modifier.background method, that sets the background color of the Canvas element which is used under the hood.

fun Modifier.background(
    color: Color,
    shape: Shape = RectangleShape
): Modifier {
    val alpha = 1.0f // for solid colors
    return this.then(
        BackgroundElement(
            color = color,
            shape = shape,
            alpha = alpha,
            inspectorInfo = debugInspectorInfo {
                name = "background"
                value = color
                properties["color"] = color
                properties["shape"] = shape
            }
        )
    )
}

The method sets the alpha to 1.0 regardless of the background color actually supplied to the chart.

[ErickSorto]

@mathklk
You don't actually set transparency through the modifier for canvas. You would actually need to change the background for Surface. Surface is causing the issue. By default the Surface (parent composable) is not transparent and we need to make it transparent like so:

Surface(
     modifier =modifier,
     color = Color.Transparent
)
{ 
     //inner composable that determines background
}

The inner most composable should determine the background colors not surface.