Donut Chart - Option to show legend at center of donuts when clicked on slice

[ishail-dev]

Thank you for building this open-source chart library for Android. I really appreciate it for all the hard work.

Problem Statement:

For donut chart, currently we have to draw all the legends and chart separately while giving a fixed height for whole block. Since size of the legends can be unpredictable, it really becomes not great UI to either have some empty space or scrollable legends separately. And neither of these looks good.

Suggestion for solution:

Instead of writing legends separately, can we write specific legend(along with percentage) in the center of donut chat whenever a slice is clicked?

[skolson]

If this helps, I did this to get roughly centered legends in my donut, Horizontal centering was problematic for some reason, so I did a workaround in the Legends modifier. I suspect how the legendsArrangement argument is implemented but did not research it. Other than that it worked for a legend of up to 8 lines of small text on a full width of screen donut,

        Box(modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .padding(margin),
            contentAlignment = Alignment.Center
        ) {
            DonutPieChart(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(),
                chartData,
                config
            ) {
                onSelect(it.label)
            }
            Legends(
                legendsConfig = legends,
                modifier = Modifier
                    .fillMaxWidth(0.5F)
                    .align(Alignment.Center)
            )
        }

Here's the legends config:

        val legends = LegendsConfig(
            legendLabelList = state.value.legends.mapIndexed {i, l ->
                LegendLabel(
                    color = colors[l.first] ?: MonayColors.chartColors1[9],
                    name = "${l.first}: ${state.value.series[i].second.format()}"
                )
            },
            colorBoxSize = 8.dp,
            textSize = textSize,
            textStyle = MonayStyles.typography.bodySmall,
            gridColumnCount = 1,
            gridPaddingVertical = 0.dp,
            spaceBWLabelAndColorBox = 4.dp,
            legendsArrangement = Arrangement.Start
        )