Skip to content

Commit

Permalink
Update the sample 7 to showcase the horizontal bar chart feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@imaNNeo
imaNNeo committed Jan 6, 2025
1 parent f119136 commit 72f6760
Showing 1 changed file with 136 additions and 95 deletions.
231 changes: 136 additions & 95 deletions example/lib/presentation/samples/bar/bar_chart_sample7.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,121 +48,162 @@ class _BarChartSample7State extends State<BarChartSample7> {

int touchedGroupIndex = -1;

int rotationTurns = 1;

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(24),
child: AspectRatio(
aspectRatio: 1.4,
child: BarChart(
BarChartData(
alignment: BarChartAlignment.spaceBetween,
borderData: FlBorderData(
show: true,
border: Border.symmetric(
horizontal: BorderSide(
color: AppColors.borderColor.withValues(alpha: 0.2),
child: Column(
children: [
Row(
children: [
Expanded(child: Container()),
const Text(
'Horizontal Bar Chart',
style: TextStyle(
color: AppColors.mainTextColor1,
fontSize: 20,
),
),
),
titlesData: FlTitlesData(
show: true,
leftTitles: const AxisTitles(
drawBelowEverything: true,
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 36,
getTitlesWidget: (value, meta) {
final index = value.toInt();
return SideTitleWidget(
meta: meta,
child: _IconWidget(
color: widget.dataList[index].color,
isSelected: touchedGroupIndex == index,
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Tooltip(
message: 'Rotate the chart 90 degrees (cw)',
child: IconButton(
onPressed: () {
setState(() {
rotationTurns += 1;
});
},
icon: RotatedBox(
quarterTurns: rotationTurns - 1,
child: const Icon(
Icons.rotate_90_degrees_cw,
),
);
},
),
),
),
),
rightTitles: const AxisTitles(),
topTitles: const AxisTitles(),
),
gridData: FlGridData(
show: true,
drawVerticalLine: false,
getDrawingHorizontalLine: (value) => FlLine(
color: AppColors.borderColor.withValues(alpha: 0.2),
strokeWidth: 1,
),
),
barGroups: widget.dataList.asMap().entries.map((e) {
final index = e.key;
final data = e.value;
return generateBarGroup(
index,
data.color,
data.value,
data.shadowValue,
);
}).toList(),
maxY: 20,
barTouchData: BarTouchData(
enabled: true,
handleBuiltInTouches: false,
touchTooltipData: BarTouchTooltipData(
getTooltipColor: (group) => Colors.transparent,
tooltipMargin: 0,
getTooltipItem: (
BarChartGroupData group,
int groupIndex,
BarChartRodData rod,
int rodIndex,
) {
return BarTooltipItem(
rod.toY.toString(),
TextStyle(
fontWeight: FontWeight.bold,
color: rod.color,
fontSize: 18,
shadows: const [
Shadow(
color: Colors.black26,
blurRadius: 12,
)
],
)),
],
),
const SizedBox(height: 18),
AspectRatio(
aspectRatio: 1.4,
child: BarChart(
BarChartData(
alignment: BarChartAlignment.spaceBetween,
rotationQuarterTurns: rotationTurns,
borderData: FlBorderData(
show: true,
border: Border.symmetric(
horizontal: BorderSide(
color: AppColors.borderColor.withValues(alpha: 0.2),
),
),
),
titlesData: FlTitlesData(
show: true,
leftTitles: const AxisTitles(
drawBelowEverything: true,
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 36,
getTitlesWidget: (value, meta) {
final index = value.toInt();
return SideTitleWidget(
meta: meta,
child: _IconWidget(
color: widget.dataList[index].color,
isSelected: touchedGroupIndex == index,
),
);
},
),
),
rightTitles: const AxisTitles(),
topTitles: const AxisTitles(),
),
gridData: FlGridData(
show: true,
drawVerticalLine: false,
getDrawingHorizontalLine: (value) => FlLine(
color: AppColors.borderColor.withValues(alpha: 0.2),
strokeWidth: 1,
),
),
barGroups: widget.dataList.asMap().entries.map((e) {
final index = e.key;
final data = e.value;
return generateBarGroup(
index,
data.color,
data.value,
data.shadowValue,
);
},
}).toList(),
maxY: 20,
barTouchData: BarTouchData(
enabled: true,
handleBuiltInTouches: false,
touchTooltipData: BarTouchTooltipData(
getTooltipColor: (group) => Colors.transparent,
tooltipMargin: 0,
getTooltipItem: (
BarChartGroupData group,
int groupIndex,
BarChartRodData rod,
int rodIndex,
) {
return BarTooltipItem(
rod.toY.toString(),
TextStyle(
fontWeight: FontWeight.bold,
color: rod.color,
fontSize: 18,
shadows: const [
Shadow(
color: Colors.black26,
blurRadius: 12,
)
],
),
);
},
),
touchCallback: (event, response) {
if (event.isInterestedForInteractions &&
response != null &&
response.spot != null) {
setState(() {
touchedGroupIndex = response.spot!.touchedBarGroupIndex;
});
} else {
setState(() {
touchedGroupIndex = -1;
});
}
},
),
),
touchCallback: (event, response) {
if (event.isInterestedForInteractions &&
response != null &&
response.spot != null) {
setState(() {
touchedGroupIndex = response.spot!.touchedBarGroupIndex;
});
} else {
setState(() {
touchedGroupIndex = -1;
});
}
},
),
),
),
],
),
);
}
}

class _BarData {
const _BarData(this.color, this.value, this.shadowValue);

final Color color;
final double value;
final double shadowValue;
Expand Down

0 comments on commit 72f6760

Please sign in to comment.