'Unable to show the Y axis value in bar tooltip by default using fl_chart package
I am working on bar chart view using fl_chart package and i able to show the bar chart but unable to show the Y-axis value in each bar by default the way i expect to do. I want to show this information by default and not at the time of touch event.
@override Widget build(BuildContext context) {
return ListView(
children: [
Card(
margin: const EdgeInsets.all(8.0),
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height - 150,
width: cityChartDataList.length *
44, // 34 is this width size of each bar and 10 pixel is space between each bar
child: BarChart(
BarChartData(
gridData: FlGridData(show: false),
alignment: BarChartAlignment.spaceEvenly,
maxY: BarChartUnit.getMaxYCount(cityChartDataList),// function to calculate the maxY dynamically
minY: 0,
groupsSpace: 12,
barTouchData: BarTouchData(
enabled: true,
),
borderData: FlBorderData(
border: const Border(
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide(width: 1.0),
bottom: BorderSide(width: 1.0))),
titlesData: FlTitlesData(
topTitles: BarChartUnit.getTopTitles(cityChartDataList),
bottomTitles:
BarChartUnit.getTopBottomTitles(cityChartDataList),
leftTitles:
BarChartUnit.getLeftSideTitles(cityChartDataList),
rightTitles: BarChartUnit.getRightSideTitles(),
),
barGroups: cityChartDataList
.map(
(data) => BarChartGroupData(
x: data.id,
// showingTooltipIndicators: [
// 0
// ],
barRods: [
BarChartRodData(
toY: data.count.toDouble(),
width: 34,
color: Colors.blue,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(2),
topRight: Radius.circular(2),
)),
],
),
)
.toList(),
),
),
),
),
const SizedBox(
height: 20,
),
const Text('End'),
// const Text('End'),
],
),
),
],
); }
I tried using showingTooltipIndicators: [0] in BarGroupChartData widget but it shows the value as shown in the below image.
but ideally i would like to remove the '.0' as i want to show the int, remove/change the background color, fit to to bar size etc but i dont know how to achieve this. can someone please help to do this? Also, if needed, i might need to show this value in tool tip in vertical direction as well.
Also, can we show multiple values in top of each bar by default? Also, why we need to give [0] in showingTooltipIndicators, what does 0 refers to here because if i give anything else, its not showing anything in tooltip. Appreciate your response!.
Solution 1:[1]
I was able to solve the problem based on the guidance from @Abitofevrything. Thanks for your guidance and really appreciated!. here is the updated code as this will help in future if someone wants to refer it.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height - 225,
width: cityChartDataList.length *
44, // 34 is this width size of each bar and 10 pixel is space between each bar
child: BarChart(
BarChartData(
// backgroundColor: Colors.yellow,
gridData: FlGridData(show: false),
alignment: BarChartAlignment.spaceEvenly,
maxY: barChartState.selectedToggleIndex == 0
? BarChartUnit.getMaxYCount(cityChartDataList)
: BarChartUnit.getMaxYAmt(cityChartDataList),
minY: 0,
groupsSpace: 12,
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Theme.of(context).cardTheme.color,
tooltipPadding: const EdgeInsets.all(2),
direction: TooltipDirection.top,
rotateAngle: 0,
getTooltipItem: (
BarChartGroupData group,
int groupIndex,
BarChartRodData rod,
int rodIndex,
) {
return BarTooltipItem(
rod.toY.toInt().toString(),
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12));
}),
enabled: true,
),
borderData: FlBorderData(
border: const Border(
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide(width: 1.0),
bottom: BorderSide(width: 1.0))),
titlesData: FlTitlesData(
topTitles: BarChartUnit.getTopTitles(cityChartDataList),
bottomTitles:
BarChartUnit.getTopBottomTitles(cityChartDataList),
leftTitles: BarChartUnit.getLeftSideTitles(cityChartDataList),
rightTitles: BarChartUnit.getRightSideTitles(),
),
barGroups: cityChartDataList
.map(
(data) => BarChartGroupData(
x: data.id,
showingTooltipIndicators: [0],
barRods: [
BarChartRodData(
toY: barChartState.selectedToggleIndex == 0
? data.count.toDouble()
: data.amt.toDouble(),
width: 34,
color: barChartState.selectedToggleIndex == 0
? Colors.blue
: Colors.green,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(2),
topRight: Radius.circular(2),
)),
],
),
)
.toList(),
),
),
),
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | James Mark |