Adding text label to a bar in fl_chart bar-chart

Question

I've built a Flutter app, and used fl_chart to present a bar chart.

It works great, but the only thing left it to add a label inside each bar, as in this UI design:

It seems fl_chart doesn't have a label property for the bar.

I've tried to add a simple Text widget on top of the chart using a Stack, but the calculation of the position of each label does not work on all screen sizes.

Does anyone know what is the best way to implement the label on the bar?

Thank you!

score 0 · Answer 1 · answered Jun 15 '21 at 15:08

I think using a Stack could be the right approach.

Have you tried stacking another Chart on top of your barchart?

Maybe something like this:

           LineChart(
              LineChartData(
                ...
                titlesData: FlTitlesData(
                  bottomTitles: SideTitles(
                    showTitles: true,
                    getTextStyles: (double v) {
                      return TextStyle(
                          color: Colors.white, fontSize: 12.0);
                    },
                    interval: [yourInterval],
                    getTitles: (value) {
                      ...
                    },
                  ),
                  leftTitles: SideTitles(showTitles: false),
                ),
                borderData: FlBorderData(
                  show: false,
                ),
                ...
              ),
            ),

Adding text label to a bar in fl_chart bar-chart

1 Answers1