google / charts

https://pub.dev/packages/charts_flutter
Apache License 2.0
2.81k stars 1.2k forks source link

How to center label in top of barchart? #804

Open BigGitWorld opened 1 year ago

BigGitWorld commented 1 year ago

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?
      )
    ];
  }