flutterdartflutter-designfl-chartflutter-ui

Line charts using fl_charts showing nothing on output(only red screen and only error message)


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)

My emulator screen after running

My end goal UI


Solution

  • 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.