PieChart¶

The PieChart() composable is part of the JetCo-UI library, designed to provide a highly customizable pie chart visualization for Jetpack Compose. With support for animations, color customization, and interaction handling, it enables developers to easily integrate visually appealing pie charts into their Android applications.

Pie Chart | Sample

PieChart Function¶

⚙️ Function Signature¶

@Composable
fun PieChart(
    modifier: Modifier = Modifier,
    chartData: Map<String, Float>,
    pieChartConfig: PieChartConfig = PieChartDefaults.pieChartConfig(),
    pieChartAnimationConfig: PieChartAnimationConfig = PieChartDefaults.pieChartAnimationConfig(),
    chartItemModifier: Modifier = Modifier,
    chartItems: (@Composable (List<PieChartEntry>) -> Unit)? = null,
    onItemClick: ((PieChartEntry) -> Unit)? = null
)

📋 Parameters¶

Parameter	Type	Description	Default Value
modifier	`Modifier`	Modifier applied to the pie chart container. Controls the chart size, padding, etc.	`Modifier`
chartData	`Map<String, Float>`	A map where each key represents a label and its corresponding value forms the data for each slice of the pie chart.	Required
pieChartConfig	`PieChartConfig`	Configuration object that defines chart properties like colors, radius, and label styles.	`PieChartDefaults.pieChartConfig()`
pieChartAnimationConfig	`PieChartAnimationConfig`	Configuration for animations such as duration and rotation.	`PieChartDefaults.pieChartAnimationConfig()`
chartItemModifier	`Modifier`	Modifier for the additional chart items like labels or values.	`Modifier`
chartItems	`@Composable ((List<PieChartEntry>) -> Unit)?`	A composable that renders the list of chart items (labels, values) for each pie slice.	`null`
onItemClick	`((PieChartEntry) -> Unit)?`	Lambda triggered when a pie chart slice is clicked, providing the selected `PieChartEntry`.	`null`

PieChartConfig¶

PieChartConfig is a data class that defines the visual aspects of the pie chart. It includes options like colors, stroke width, and text styles.

🎨 Default Configuration¶

You can easily get a default configuration using:

val pieChartConfig = PieChartDefaults.pieChartConfig()

Example Usage¶

Here’s a sample implementation that demonstrates how to use the PieChart composable in your app:

val chartData = mapOf(
    "Food" to 40f,
    "Rent" to 30f,
    "Savings" to 20f,
    "Misc" to 10f
)

PieChart(
    modifier = Modifier.fillMaxSize(),
    chartData = chartData,
    pieChartConfig = PieChartDefaults.pieChartConfig(),
    pieChartAnimationConfig = PieChartDefaults.pieChartAnimationConfig(),
    onItemClick = { entry -> Log.d("PieChart", "Clicked on ${entry.name}") }
)

🛠️ Customizing Your PieChart¶

The PieChartConfig allows you to customize various properties of the chart. For example, you can customize the colors and the text style of the labels:

val customConfig = PieChartConfig(
    colorsList = listOf(Color.Red, Color.Blue, Color.Green, Color.Yellow),
    radius = 120.dp,
    labelTextStyle = TextStyle(
        fontSize = 16.sp,
        color = Color.Black
    )
)

PieChart(
    modifier = Modifier.size(300.dp),
    chartData = chartData,
    pieChartConfig = customConfig
)

🎥 Adding Animations¶

Use the PieChartAnimationConfig to animate the pie chart with different effects:

val animationConfig = PieChartAnimationConfig(
    animationDuration = 2000,
    animateRotation = true,
    numberOfRotations = 2
)

PieChart(
    modifier = Modifier.size(300.dp),
    chartData = chartData,
    pieChartAnimationConfig = animationConfig
)

Exploring More¶

⚡ Event Handling¶

Want to track user interactions? The onItemClick parameter allows you to handle click events on each pie slice:

PieChart(
    chartData = chartData,
    onItemClick = { entry -> 
        // Handle the clicked slice data
        Log.d("PieChart", "Clicked on ${entry.name}, value: ${entry.value}")
    }
)

📊 Displaying Chart Items¶

You can pass a custom chartItems composable to display a list of items representing the pie chart data. This allows you to provide additional information, like labels and values, outside the chart itself:

PieChart(
    chartData = chartData,
    chartItems = { items -> 
        Column {
            items.forEach { item ->
                Text(text = "${item.name}: ${item.value}")
            }
        }
    }
)

Check out Sample usage of the PieChart.

The PieChart composable from JetCo-UI provides a robust, customizable solution for integrating pie charts into your Android applications. Whether you need simple visualizations or highly interactive charts, PieChart offers the flexibility and ease of use to meet your needs.

Explore more in the JetCo-UI GitHub Repository and check out the comprehensive guides and samples to see how to make the most out of this powerful chart component!