Hi
I wan to show y-axis values as label on top-center of barcharts, but the lables (values provided by the labelAccessorFn
) are shown in top-left side.
why?
//barchart:
charts.BarChart(
data(statistics),
animate: true,
barRendererDecorator: charts.BarLabelDecorator(
insideLabelStyleSpec: charts.TextStyleSpec(color: charts.ColorUtil.fromDartColor(Colors.white)),
outsideLabelStyleSpec: charts.TextStyleSpec(color: charts.ColorUtil.fromDartColor(Colors.white)),
),
domainAxis: const charts.OrdinalAxisSpec(
renderSpec: charts.SmallTickRendererSpec(
labelRotation: 45,
labelStyle: charts.TextStyleSpec(
fontSize: 18,
color: charts.MaterialPalette.white,
),
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.white,
),
),
),
),
//data:
List<charts.Series<BarChartPoint, String>> data(var statistics) {
final data = [
for (var item in statistics.details)
BarChartPoint(
label: item.name, value: item.count, color: Colors.red),
];
return [
charts.Series<BarChartPoint, String>(
id: 'barchart-id',
colorFn: (BarChartPoint point, _) =>
charts.ColorUtil.fromDartColor(point.color ?? Colors.white),
domainFn: (BarChartPoint point, _) => point.label,
measureFn: (BarChartPoint point, _) => point.value,
data: data,
//strokeWidthPxFn: (BarChartPoint point, _) => 64,
labelAccessorFn: (BarChartPoint point, _) => '${point.value}', //this is not top-center (it is top-left). why?
)
];
}