0

This is my fl_chart bar chart.

I need to add the 'AVG' text to the line as in the image below.

Any ideas? Really stuck. The line is returned under "getDrawingHorizontalLine" section below.

I could try and figure out where this line is and use a stack but doesn't sound too promising

 return BarChart(
  BarChartData(
    barGroups: graphData,
    alignment: BarChartAlignment.center,
    groupsSpace: isPortrait ? null : 70,
    minY: 0,
    maxY: maxUsage,
    gridData: FlGridData(
      horizontalInterval: average,
      checkToShowHorizontalLine: (value) => value == average,  <----- draw when avg
      drawHorizontalLine: true,
      drawVerticalLine: false,
      getDrawingHorizontalLine: (value) => FlLine( <------ draws the line
        color: Colors.white,
        strokeWidth: 1,
        dashArray: [5, 5],
      ),
    ),

enter image description here

Wesley Barnes
  • 554
  • 4
  • 18

1 Answers1

1

I ended up adding it to the right titles and showing it when value == the value I want it to show.

  static AxisTitles getRightTitles(isOverlay, maxUsage, averageUsage) => AxisTitles(
    sideTitles: SideTitles(
      interval: 0.9,
      showTitles: isOverlay,
      reservedSize: 34,
      getTitlesWidget: (value, meta) {
        final String avg = averageUsage.toStringAsFixed(0);
        final String val = value.toStringAsFixed(0);
        final bool show = (avg == val);
        return isOverlay && show
            ? const Padding(
                padding: EdgeInsets.only(left: 8.0, top: 3),
                child: Text(
                  'AVG',
                  maxLines: 1,
                  softWrap: false,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 11,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            : const SizedBox();
      },
    ),
  );
Wesley Barnes
  • 554
  • 4
  • 18