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

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:

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:

• flutter
• bar-chart
• rounded-corners
• fl-chart
• flutter-ui

Share Follow edited Feb 1 at 11:33 Mark Rotteveel 110k229229 gold badges156156 silver badges224224 bronze badges asked Jan 30 at 13:38 Enayatullah HabibiEnayatullah Habibi 1355 bronze badges 1

• Maybe you could add a screenshots of your results and what you expect? – Herbert Poul Commented Jan 31 at 9:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

if you want this type of result then set this code

 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(),
                  ),
                ],
              ),
            )