I implemented line chart following some Youtube tutorials, documentation of fl_charts but error is coming and also graph not showing on the Output screens, only red screen is coming stating : Unsupported operation: Infinity or NaN toInt
My chart screen code
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is the Charts Screen'),
// Display the selected index passed from the drawer
LineChart(
LineChartData(
gridData: FlGridData(show: true),
titlesData: FlTitlesData(
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 4, // Customize based on your scale
getTitlesWidget: (value, meta) {
if (value.isNaN || value.isInfinite) {
return Text(''); // Return an empty widget for invalid values
}
return Text('${value.toInt()}'); // Display the value as an integer
},
),),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) {
if (value.isNaN || value.isInfinite) {
return Text(''); // Return an empty widget for invalid values
}
// Use a switch-case to map X values to months
switch (value.toInt()) {
case 0:
return Text('Jan');
case 1:
return Text('Feb');
case 2:
return Text('Mar');
case 3:
return Text('Apr');
case 4:
return Text('May');
case 5:
return Text('Jun');
case 6:
return Text('Jul');
case 7:
return Text('Aug');
case 8:
return Text('Sep');
case 9:
return Text('Oct');
case 10:
return Text('Nov');
case 11:
return Text('Dec');
default:
return Text(''); // Return an empty widget for out-of-range values
}
},
),),),
borderData: FlBorderData(show: true),
minX: 0,
maxX: 11, // For 12 months
minY: 0,
maxY: 12, // Adjust the max Y based on your data scale
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 8), // Jan
FlSpot(1, 6), // Feb
FlSpot(2, 8), // Mar
FlSpot(3, 10), // Apr
FlSpot(4, 9), // May
FlSpot(5, 11), // Jun
FlSpot(6, 7), // Jul
FlSpot(7, 8), // Aug
FlSpot(8, 9), // Sep
FlSpot(9, 12), // Oct
FlSpot(10, 11),// Nov
FlSpot(11, 10),// Dec
],
isCurved: true,
color: Colors.green,
dotData: FlDotData(show: true),
belowBarData: BarAreaData(
show: true,
color: Colors.green.withOpacity(0.3),
),),
],),),
],
),
),
);
}
This the error message i am getting in console :
======== Exception caught by widgets library =======================================================
The following UnsupportedError was thrown building SideTitlesWidget:
Unsupported operation: Infinity or NaN toInt
The relevant error-causing widget was:
LineChart LineChart:file:///D:/Prog/learn/lib/settings_screen.dart:37:12
When the exception was thrown, this was the stack:
#0 double.toInt (dart:core-patch/double.dart)
#1 double.truncate (dart:core-patch/double.dart:196:21)
#2 double.~/ (dart:core-patch/double.dart:57:38)
#3 Utils.getEfficientInterval (package:fl_chart/src/utils/utils.dart:136:48)
#4 SideTitlesWidget.makeWidgets (package:fl_chart/src/chart/base/axis_chart/side_titles/side_titles_widget.dart:116:17)
#5 SideTitlesWidget.build (package:fl_chart/src/chart/base/axis_chart/side_titles/side_titles_widget.dart:210:32)
#6 StatelessElement.build (package:flutter/src/widgets/framework.dart:5557:49)
#7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5487:15)
#8 Element.rebuild (package:flutter/src/widgets/framework.dart:5203:7)
#9 StatelessElement.update (package:flutter/src/widgets/framework.dart:5563:5)
#10 Element.updateChild (package:flutter/src/widgets/framework.dart:3827:15)
#11 Element.updateChildren (package:flutter/src/widgets/framework.dart:3976:32)
#12 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6929:17)
#13 Element.updateChild (package:flutter/src/widgets/framework.dart:3827:15)
#14 _LayoutBuilderElement._layout.layoutCallback (package:flutter/src/widgets/layout_builder.dart:155:18)
#15 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2845:19)
#16 _LayoutBuilderElement._layout (package:flutter/src/widgets/layout_builder.dart:173:12)
#17 RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:2688:59)
#18 PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1097:15)
#19 RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:2688:14)
#20 RenderConstrainedLayoutBuilder.rebuildIfNecessary (package:flutter/src/widgets/layout_builder.dart:248:7)
#21 _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:331:5)
#22 RenderObject.layout (package:flutter/src/rendering/object.dart:2577:7)
#23 ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:52:11)
#24 RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:815:43)
#25 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:885:32)
#26 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2416:7)
#27 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1051:18)
#28 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1064:15)
#29 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:577:23)
#30 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1138:13)
#31 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:443:5)
#32 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1392:15)
#33 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1313:9)
#34 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1171:5)
#35 _invoke (dart:ui/hooks.dart:312:13)
#36 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:419:5)
#37 _drawFrame (dart:ui/hooks.dart:283:31)
LineChart
is given an infinite max height constraint and tries to divide this into interval
which of course can't be done. The solution is to constrain its height, for example with a SizedBox
with height
set to an explicit value or an AspectRatio
that will set the height to a factor of its width.
You can see that even package's examples do that here.