I'm using this package https://pub.dev/packages/fl_chart and trying to label min and max in the chart like the image below Goal Now I have this What I have.
In specific I need to label the min and max like the first image, but when the user touch the chart the behaviour be like this
enter image description here
I've been stuck on this for weeks and can't find any information or topics like this, please .
I saw this example https://github.com/imaNNeo/fl_chart/blob/master/example/lib/presentation/samples/line/line_chart_sample5.dart example with points but following that code I lose some behaviors that I need, like touching any other point and displaying the information.
I'm using LineChartData, this is my code:
LineChart(
swapAnimationDuration:
Duration(milliseconds: 200),
swapAnimationCurve: Curves.decelerate,
LineChartData(
gridData: FlGridData(
show: false,
),
borderData: FlBorderData(
show: false,
),
titlesData: FlTitlesData(
show: false,
),
lineTouchData: LineTouchData(
enabled: true,
getTouchLineStart:
(LineChartBarData barData, int spotIndex) {
return 0.0;
},
getTouchLineEnd:
(LineChartBarData barData, int spotIndex) {
return max;
},
getTouchedSpotIndicator: (barData, spotIndexes) {
return spotIndexes.map((spotIndex) {
final FlSpot spot = barData.spots[spotIndex];
if (spot.x == 0 || spot.x == 1) {
return null;
}
return TouchedSpotIndicatorData(
FlLine(
color: HexColor(widget.currency.color),
strokeWidth: 1,
dashArray: [5, 7]),
FlDotData(
show: true,
getDotPainter:
(spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 10,
color: Color(int.parse(
widget.currency.color
.replaceAll("#", ""),
radix: 16))
.withOpacity(0.7),
strokeWidth: 1,
strokeColor: Colors.green,
);
},
),
);
}).toList();
},
touchCallback: (p0, p1) {
if (p0.isInterestedForInteractions == false) {
change = true;
setState(() {
balance = widget.currency.balance;
});
Future.delayed(
const Duration(milliseconds: 300))
.then((value) {
if (change) {
setState(() {
balanceWidget = widget.title;
});
}
});
return;
}
if (p1 == null) {
return;
}
if (p1.lineBarSpots?.first == null) {
return;
}
change = false;
setState(() {
balance = p1.lineBarSpots!.first.y.toString();
balanceWidget = updateBalanceWidget();
});
},
touchTooltipData: LineTouchTooltipData(
fitInsideHorizontally: true,
showOnTopOfTheChartBoxArea: true,
tooltipBgColor: customColors.background3,
getTooltipItems: (touchedSpots) {
return touchedSpots.map(
(LineBarSpot touchedSpot) {
const textStyle = TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.white,
fontFamily: 'Poppins');
return LineTooltipItem(
DateFormat('yyyy/MM/dd').format(widget
.chartData[touchedSpot.spotIndex]
.date),
textStyle,
);
},
).toList();
},
)),
minX: widget
.chartData.first.date.millisecondsSinceEpoch
.toDouble(),
maxX: widget
.chartData.last.date.millisecondsSinceEpoch
.toDouble(),
minY: min,
maxY: max,
lineBarsData: [
LineChartBarData(
curveSmoothness: 0.2,
spots: flSpotData,
isCurved: true,
color: HexColor(widget.currency.color),
dotData: FlDotData(show: false),
barWidth: 3,
isStrokeCapRound: true,
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: gradientColors,
),
),
),
],
),
)