Building a Customizable Pie Chart Component with Jetpack Compose

In this tutorial we create a reusable pie chart component for Android using Jetpack Compose. The component supports displaying one or multiple pies, switching between solid and ring styles, animating the drawing process, customizing ring thickness, dynamically controlling segment colors, and showing descriptive labels around the chart.

Data preparation : The chart data is represented by a PieData class containing a segment name, value, and color string. A list of PieData objects forms the data source for a single pie.

Drawing the pie : A Pie composable receives the data list and a modifier for size. It calculates the total value, converts each segment value to a sweep angle using the formula sweepAngle = value / total * 360 , and iterates over the list to draw each sector with drawArc . The radius is derived from the canvas size, and the start angle of the first sector is –90°.

Ring style : By setting the style to Stroke and useCenter to false , the pie becomes a ring. The ring thickness is configurable via a parameter.

Animation : Each sector’s sweep angle is animated with animateFloatAsState . A list of animated values ( diffAngleList ) is created using LaunchedEffect and a Flow timer, allowing sequential animation with delays so that sectors appear one after another.

Description positioning : An enum DescriptionDirection defines where labels appear (LEFT, RIGHT, TOP, BOTTOM, CIRCLE). For each direction the code calculates the appropriate topLeft coordinates, draws the color block with drawRect and the text with drawText , and adjusts offsets to avoid overlap.

Multiple dimensions : A higher‑level PieChart composable accepts a list of PieData groups and displays them in a LazyVerticalGrid with two columns, allowing several pies to be shown side‑by‑side. The same solid or ring style and description options apply to each chart.

Conclusion : The component now provides basic pie‑chart functionality with animation, style switching, and flexible label placement. Future work may include interactive features such as hover‑enlargement of sectors and further visual refinements.