flutterbar-chartrounded-cornersfl-chartflutter-ui

How to add rounded borders to a bar chart in Flutter using fl_chart?


I’m working on a Flutter app where I'm using the fl_chart package to display bar charts. I want to add rounded borders around the entire chart (not just the bars). However, it seems that fl_chart doesn't directly support rounded borders for the chart's outer border.

Here's what I've tried so far:

  1. I used the borderData property of BarChartData to add a border, but it only supports rectangular borders.
  2. I attempted to wrap the BarChart widget in a Container with BoxDecoration to create rounded corners, but I'm unsure how to ensure the chart content aligns properly within the rounded container.
SizedBox(
  height: 250,
  child: BarChart(
    BarChartData(
      alignment: BarChartAlignment.spaceEvenly,
      maxY: dailyTotals.values.isNotEmpty
          ? dailyTotals.values.reduce((a, b) => a > b ? a : b) + 10
          : 10,
      barGroups: getWeeklyBarGroups(),
      titlesData: FlTitlesData(
        leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            getTitlesWidget: (value, meta) {
              final weekDays = [
                'Sat',
                'Sun',
                'Mon',
                'Tue',
                'Wed',
                'Thu',
                'Fri'
              ];
              return Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Text(
                  weekDays[value.toInt()],
                  style: const TextStyle(fontSize: 12, fontFamily: 'lexend'),
                ),
              );
            },
          ),
        ),
      ),
      borderData: FlBorderData(
        show: true,
        border: Border.all(
          color: Theme.of(context).colorScheme.primary,
          width: 2,
        ),
      ),
    ),
  ),
),

I also tried wrapping the BarChart in a Container with rounded corners like this:

SizedBox(
  height: 250,
  child: Container(
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.surface,
      borderRadius: BorderRadius.circular(16),
      border: Border.all(
        color: Theme.of(context).colorScheme.primary,
        width: 2,
      ),
    ),
    padding: const EdgeInsets.all(8),
    child: BarChart(
      BarChartData(
        // Same BarChartData configuration as above
      ),
    ),
  ),
),

Expected results:

enter image description here


Solution

  • if you want this type of result then set this code

    enter image description here

     SizedBox(
                  height: 280, 
                  width: 400,  
                  child: Column(
                    children: [
                      Container(
                        height: 250,
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: Colors.yellow.shade50,
                          borderRadius: BorderRadius.circular(20),
                          border: Border.all(
                            color: Theme.of(context).colorScheme.primary,
                            width: 2,
                          ),
                        ),
                        child: Padding(
                          padding: EdgeInsets.all(5.0),
                          child: BarChart(
                            BarChartData(
                              backgroundColor: Colors.transparent,
                              alignment: BarChartAlignment.spaceEvenly,
                              maxY: 10,
                              barGroups: [
                                BarChartGroupData(x: 0, barRods: [BarChartRodData(color: Colors.red, width: 20, toY: 8)]),
                                BarChartGroupData(x: 1, barRods: [BarChartRodData(color: Colors.yellow, width: 20, toY: 4)]),
                                BarChartGroupData(x: 2, barRods: [BarChartRodData(color: Colors.cyan, width: 20, toY: 6)]),
                                BarChartGroupData(x: 3, barRods: [BarChartRodData(color: Colors.pink, width: 20, toY: 9)]),
                                BarChartGroupData(x: 4, barRods: [BarChartRodData(color: Colors.deepOrange, width: 20, toY: 6)]),
                                BarChartGroupData(x: 5, barRods: [BarChartRodData(color: Colors.blue, width: 20, toY: 3)]),
                                BarChartGroupData(x: 6, barRods: [BarChartRodData(color: Colors.deepPurpleAccent, width: 20, toY: 7)]),
                              ],
                              titlesData: FlTitlesData(
                                leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
                                topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
                                rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
                                bottomTitles: AxisTitles(
                                  sideTitles: SideTitles(showTitles: false), 
                                ),
                              ),
                              borderData: FlBorderData(show: false),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 10),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
                            .map((day) => Text(
                          day,
                          style: TextStyle(fontSize: 12, fontFamily: 'lexend'),
                        ))
                            .toList(),
                      ),
                    ],
                  ),
                )