1 year ago

#386699

test-img

Martin Boros

How to implement onClick on labels in flutter piecharts?

I'm using charts_flutter library to display a piechart. What I try to achive, is that, when you tap either a part of the chart, or the associated label (which is rendered outside), it navigates to a page. I have already found the way, to select a section of the piechart, and navigate accordingly, but since there are very slim parts of the diagram, it's nearly impossible to click on them, so i need to be able to click on its labels, and still navigate. Is this possible?

final rendererConfig = charts.ArcRendererConfig(arcWidth: 65, arcRendererDecorators: [
      charts.ArcLabelDecorator(
          insideLabelStyleSpec: const charts.TextStyleSpec(fontSize: 12, color: charts.Color.black), labelPosition: charts.ArcLabelPosition.outside)
    ]);

List<charts.Series<CropSeries, String>> series = [
      charts.Series(
        id: "PieChart",
        data: data,
        domainFn: (CropSeries series, _) => series.name,
        measureFn: (CropSeries series, _) => series.totalArea,
        colorFn: (CropSeries series, _) => series.color,
        labelAccessorFn: (CropSeries series, _) => '${series.name}: ${numberFormat.format(series.totalArea)} ${series.areaUnit}',
      )
    ];

return charts.PieChart(series, animate: true, defaultRenderer: rendererConfig, selectionModels: [
              charts.SelectionModelConfig(
                changedListener: (SelectionModel model) {
                  if (model.hasDatumSelection) {
                    String cropRotation = model.selectedSeries.first.domainFn(model.selectedDatum.first.index);

                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => VarietyRotationScreen(cropRotationName: cropRotation),
                      ),
                    );
                  }
                },
              )
            ]);

flutter

dart

charts

onclick

pie-chart

0 Answers

Your Answer

Accepted video resources