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