1 year ago
#386699
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