Flutter bar chart displaying numbered value on top of each bar

I’m having an issue on flutter.

I want to display a barchart based on data i have in a json files.

My json looks like this

{"yearly_crime_counts": {
    "2001": 485885,
    "2002": 486805,
    "2003": 475983,
    "2004": 469421,
    "2005": 453772,
    "2006": 448178,
    "2007": 437087,
    "2008": 427169,
    "2009": 392825,
    "2010": 370505,
    "2011": 351975,
    "2012": 336273,
    "2013": 307478,
    "2014": 275745,
    "2015": 264775,
    "2016": 269808,
    "2017": 269092,
    "2018": 268811,
    "2019": 261290,
    "2020": 212170,
    "2021": 208733,
    "2022": 238712,
    "2023": 134317
},}

I have succeeded but I end up with numbered value on top of each bar.

I first created a function to load the data that are in the json, once that done I created the widget to display the bar chart. But I always end up with a position number from left to right for every bar.
I’m really struggling on how this happened, here is my code so far :

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fl_chart/fl_chart.dart';
import 'dart:convert' show json;

class DashboardPage extends StatefulWidget {
  @override
  _DashboardPageState createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  Map<String, dynamic>? jsonData;

  @override
  void initState() {
    super.initState();
    _loadJsonData();
  }

  Future<void> _loadJsonData() async {
    final jsonStr = await rootBundle.loadString('assets/crime_insights.json');
    jsonData = json.decode(jsonStr);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Yearly Crime Counts')),
      body: Center(
        child: jsonData != null
            ? _buildBarChart(jsonData!['yearly_crime_counts'])
            : CircularProgressIndicator(),
      ),
    );
  }

  Widget _buildBarChart(Map<String, dynamic> data) {
    final List<String> years = data.keys.toList();
    final List<int> crimeCounts = data.values.map<int>((value) => value as int).toList();

    return SizedBox(
      height: 300,
      child: BarChart(
        BarChartData(
          titlesData: FlTitlesData(
            leftTitles: SideTitles(showTitles: true),
            bottomTitles: SideTitles(
              showTitles: true,
              getTextStyles: (context, value) =>
                  const TextStyle(color: Color(0xff939393), fontWeight: FontWeight.bold, fontSize: 12),
              getTitles: (value) => years[value.toInt()],
            ),
          ),
          borderData: FlBorderData(show: false),
          barGroups: years
              .asMap()
              .map(
                (index, year) => MapEntry(
                  index,
                  BarChartGroupData(
                    x: index,
                    barsSpace: 4,
                    barRods: [
                      BarChartRodData(
                        y: crimeCounts[index].toDouble(),
                        width: 16,
                        colors: [Colors.blue],
                      ),
                    ],
                  ),
                ),
              )
              .values
              .toList(),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: DashboardPage(),
  ));
}

Thank you for your help.

>Solution :

Try adding topTitles to this part

      titlesData: FlTitlesData(
        leftTitles: SideTitles(showTitles: true),
        bottomTitles: SideTitles(
          showTitles: true,
          getTextStyles: (context, value) =>
              const TextStyle(color: Color(0xff939393), fontWeight: FontWeight.bold, fontSize: 12),
          getTitles: (value) => years[value.toInt()],
        ),
      ),

like

      titlesData: FlTitlesData(
        topTitles: SideTitles(showTitles: false),
        leftTitles: SideTitles(showTitles: true),
        bottomTitles: SideTitles(
          showTitles: true,
          getTextStyles: (context, value) =>
              const TextStyle(color: Color(0xff939393), fontWeight: FontWeight.bold, fontSize: 12),
          getTitles: (value) => years[value.toInt()],
        ),
      ),