my custom code draws a chart with multiple series. on first load the x and y axis labels displays correctly but the moment i mouse over the chart and the tooltip appears, my x and y titles dissapear. any suggestion / help would be appreciated.
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:fl_chart/fl_chart.dart';
class DateLineChart extends StatefulWidget {
const DateLineChart({
Key? key,
this.width,
this.height,
required this.xvals,
required this.yvals1,
required this.yvals2,
required this.yvals3,
required this.yvals4,
required this.yvals5,
required this.line1Color,
required this.line2Color,
required this.line3Color,
required this.line4Color,
required this.line5Color,
required this.seriesLabel1,
required this.seriesLabel2,
required this.seriesLabel3,
required this.seriesLabel4,
required this.seriesLabel5,
}) : super(key: key);
final double? width;
final double? height;
final List<double> xvals;
final List<double> yvals1;
final List<double>? yvals2;
final List<double>? yvals3;
final List<double>? yvals4;
final List<double>? yvals5;
final Color? line1Color;
final Color? line2Color;
final Color? line3Color;
final Color? line4Color;
final Color? line5Color;
final String? seriesLabel1;
final String? seriesLabel2;
final String? seriesLabel3;
final String? seriesLabel4;
final String? seriesLabel5;
@override
DateLineChartState createState() => DateLineChartState();
}
class _DateLineChartState extends State<DateLineChart> {
final List<String> seriesName = [];
@override
Widget build(BuildContext context) {
return Stack(children: [
AspectRatio(
aspectRatio: 1.70,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: Colors.white),
child: Padding(
padding: const EdgeInsets.only(
right: 18.0, left: 12.0, top: 24, bottom: 12),
child: LineChart(
mainData(),
),
),
),
),
]);
}
LineChartData mainData() {
List<LineChartBarData> lbData = [];
List<FlSpot> line1Data = [];
bool notZero = false;
for (int i = 0; i < widget.xvals!.length; i++) {
if (widget.yvals1![i] != 0) notZero = true;
line1Data.add(FlSpot(widget.xvals![i], widget.yvals1![i]));
}
if (notZero) {
seriesName.add(widget.seriesLabel1!);
lbData.add(LineChartBarData(
spots: line1Data,
isCurved: true,
dotData: FlDotData(
show: false,
),
barWidth: 0.75,
color: widget.line1Color,
));
}
if (widget?.yvals2 != null) {
List<FlSpot> lineData = [];
notZero = false;
for (int i = 0; i < widget.xvals!.length; i++) {
if (widget.yvals2![i] != 0) notZero = true;
lineData.add(FlSpot(widget.xvals![i], widget.yvals2![i]));
}
if (notZero) {
seriesName.add(widget.seriesLabel2!);
lbData.add(LineChartBarData(
spots: lineData,
isCurved: true,
dotData: FlDotData(
show: false,
),
barWidth: 0.75,
color: widget.line2Color,
));
}
}
if (widget?.yvals3 != null) {
List<FlSpot> lineData = [];
notZero = false;
for (int i = 0; i < widget.xvals!.length; i++) {
if (widget.yvals3![i] != 0) notZero = true;
lineData.add(FlSpot(widget.xvals![i], widget.yvals3![i]));
}
if (notZero) {
seriesName.add(widget.seriesLabel3!);
lbData.add(LineChartBarData(
spots: lineData,
isCurved: true,
dotData: FlDotData(
show: false,
),
barWidth: 0.75,
color: widget.line3Color,
));
}
}
if (widget?.yvals4 != null) {
List<FlSpot> lineData = [];
notZero = false;
for (int i = 0; i < widget.xvals!.length; i++) {
if (widget.yvals4![i] != 0) notZero = true;
lineData.add(FlSpot(widget.xvals![i], widget.yvals4![i]));
}
if (notZero) {
seriesName.add(widget.seriesLabel4!);
lbData.add(LineChartBarData(
spots: lineData,
isCurved: true,
dotData: FlDotData(
show: false,
),
barWidth: 0.75,
color: widget.line4Color,
));
}
}
if (widget?.yvals5 != null) {
notZero = false;
List<FlSpot> lineData = [];
for (int i = 0; i < widget.xvals!.length; i++) {
if (widget.yvals5![i] != 0) notZero = true;
lineData.add(FlSpot(widget.xvals![i], widget.yvals5![i]));
}
print('5-' + notZero.toString());
if (notZero) {
seriesName.add(widget.seriesLabel5!);
lbData.add(LineChartBarData(
spots: lineData,
isCurved: true,
dotData: FlDotData(
show: false,
),
barWidth: 0.75,
color: widget.line5Color,
));
}
}
return LineChartData(
lineBarsData: lbData,
borderData: FlBorderData(show: false),
gridData: FlGridData(show: false),
titlesData: FlTitlesData(
bottomTitles: AxisTitles(
),
leftTitles: AxisTitles(
//drawBelowEverything: false,
sideTitles: _leftTitles,
),
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
),
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
getTooltipItems: (touchedSpots) {
//int cnt = 0;
return touchedSpots.map((LineBarSpot touchedSpot) {
final textStyle = TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
);
int cnt = touchedSpot.barIndex;
String ret = touchedSpot.y.toString();
ret = seriesName[cnt]! + " - " + ret;
//cnt++;
return LineTooltipItem(ret, textStyle);
}).toList();
},
),
));
}
List<String> _bottomDateShowed = [];
SideTitles get _bottomTitles => SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) {
const style = TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 10,
);
var inval = value.round() * 1000;
//print(inval);
var dt = DateTime.fromMillisecondsSinceEpoch(inval);
//print(DateFormat().format(dt));
String d24 = DateFormat('dd').format(dt);
//print(d24);
if (_bottomDateShowed.contains(d24)) {
return Container();
} else {
_bottomDateShowed.add(d24);
return Text(d24, style: style, textAlign: TextAlign.right);
}
},
);
List<String> _leftNrShowed = [];
SideTitles get _leftTitles => SideTitles(
showTitles: true,
getTitlesWidget: (double value, TitleMeta meta) {
const style = TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 10,
);
int valmod = (value.toInt() / 100).round();
String leftAx = (valmod * 100).toString();
if (_leftNrShowed.contains(leftAx)) {
return Container();
} else {
_leftNrShowed.add(leftAx);
return Text(leftAx, style: style, textAlign: TextAlign.right);
}
});
}