Bar Chart overflows Container widget

[clemens-]

Describe the bug When creating a bar graph, the graph is larger than the container surrounding it. I would expect the graph to stay within the container size I defined.

To Reproduce

Widget _buildBarGraph(BuildContext context, List<int> allValues, bool opState) {
  final int barGraphLength = 5;
  List<int> values = List.filled(barGraphLength, 0);
  for (var i = 0; i < barGraphLength; i++) {
    if (i < allValues.length) {
      values[i] = allValues[i];
    }
  }

  List<BarChartGroupData> barChartGroupData = [
    BarChartGroupData(
      x: 0,
      barRods: [
        BarChartRodData(
          toY: values[0].toDouble(),
          color: (opState ? FlutterFlowTheme.of(context).alternate : Colors.transparent),
          borderSide: BorderSide(color: FlutterFlowTheme.of(context).alternate, width: 4),
          width: 36,
          borderRadius: BorderRadius.circular(6),
        ),
      ],
      showingTooltipIndicators: [0],
    ),
  ];

  for (var i = 1; i < barGraphLength; i++) {
    barChartGroupData.add(
      BarChartGroupData(
        x: i,
        barRods: [
          BarChartRodData(
            toY: values[i].toDouble(),
            color: FlutterFlowTheme.of(context).primary,
            borderSide: BorderSide(color: FlutterFlowTheme.of(context).primary, width: 4),
            width: 36,
            borderRadius: BorderRadius.circular(6),
          ),
        ],
        showingTooltipIndicators: [0],
      ),
    );
  }

  return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: FlutterFlowTheme.of(context).pacificCyan,
      ),
      child: BarChart(
            BarChartData(
              titlesData: FlTitlesData(show: false),
              minY: 0,
              maxY: 100,
              gridData: FlGridData(show: false),
              borderData: FlBorderData(show: false),
              barGroups: barChartGroupData,
              barTouchData: BarTouchData(
                  enabled: false,
                  touchTooltipData: BarTouchTooltipData(
                    tooltipBgColor: Colors.transparent,
                    tooltipMargin: 6,
                    getTooltipItem: (
                      BarChartGroupData group,
                      int groupIndex,
                      BarChartRodData rod,
                      int rodIndex,
                    ) {
                      return BarTooltipItem(
                        rod.toY.round().toString(),
                        FlutterFlowTheme.of(context).bodyMedium,
                      );
                    },
                  )),
            ),
          ));
}

Screenshots The container is painted in cyan. Note that the bottom lines overflow on all bars as well as on the top of the column to the left.

Versions Flutter version 3.19.0 fl_chart: 0.66.2

[imaNNeo]

Please provide a full reproducible code (a main.dart file content)

[RashkaDahir]

are you solve

[clemens-]

@RashkaDahir I found a workaround: I just limit the maximum height of my data to a suitable value. This works until it does not and is probably not the best option. But I did not find any other solution.

  List<BarChartGroupData> barChartGroupData = [
    BarChartGroupData(
      x: 0,
      barRods: [
        BarChartRodData(
          toY: values[0] <= 100 ? values[0].toDouble() : 100,
          color: (opState ? FlutterFlowTheme.of(context).alternate : Colors.transparent),
          borderSide: BorderSide(color: FlutterFlowTheme.of(context).alternate, width: 3),
          width: 36,
          borderRadius: BorderRadius.circular(6),
        ),
      ],
      showingTooltipIndicators: [0],
    ),
  ];

@imaNNeo I cannot post my complete code.

[imaNNeo]

You can attach a file (preferably a main.dart file)