committed

Author: PavithraNandhiniRamachandran

lib/main.dart

@@ -11,9 +11,7 @@ class ChartApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Chart Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue
-      ),
+      theme: ThemeData(primarySwatch: Colors.blue),
       home: MyHomePage(),
     );
   }
@@ -28,6 +26,14 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
+  TooltipBehavior _tooltipBehavior;
+
+  @override
+  void initState() {
+    _tooltipBehavior = TooltipBehavior(enable: true);
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -39,53 +45,52 @@ class _MyHomePageState extends State<MyHomePage> {
             height: 500,
             width: 320,
             child: SfCartesianChart(
-              backgroundColor: Colors.white,
-              plotAreaBackgroundColor: Colors.white,
-              onTooltipRender: (TooltipArgs args) {
-                if (args.pointIndex == 0) {
-                  //Tooltip without header
-                  args.header = '';
-                }
-                if (args.pointIndex == 1) {
-                  //Tooltip with customized header
-                  args.header = 'Sold';
-                }
-                if (args.pointIndex == 2) {
-                  //Tooltip with X and Y positions of data points
-                  args.header = 'x : y';
-                  args.text = '${args.locationX.floor()} : ${args.locationY.floor()}';
-                }
-                if(args.pointIndex == 3) {
-                  //Tooltip with formatted DateTime values
-                  List<CartesianChartPoint<dynamic>> chartdata = args.dataPoints;
-                  args.header = DateFormat('d MMM yyyy').format(chartdata[3].x);
-                  args.text = '${chartdata[3].y}';
-                }
-              },
+                backgroundColor: Colors.white,
+                plotAreaBackgroundColor: Colors.white,
+                onTooltipRender: (TooltipArgs args) {
+                  if (args.pointIndex == 0) {
+                    //Tooltip without header
+                    args.header = '';
+                  }
+                  if (args.pointIndex == 1) {
+                    //Tooltip with customized header
+                    args.header = 'Sold';
+                  }
+                  if (args.pointIndex == 2) {
+                    //Tooltip with X and Y positions of data points
+                    args.header = 'x : y';
+                    args.text =
+                        '${args.locationX.floor()} : ${args.locationY.floor()}';
+                  }
+                  if (args.pointIndex == 3) {
+                    //Tooltip with formatted DateTime values
+                    List<CartesianChartPoint<dynamic>> chartdata =
+                        args.dataPoints;
+                    args.header =
+                        DateFormat('d MMM yyyy').format(chartdata[3].x);
+                    args.text = '${chartdata[3].y}';
+                  }
+                },
                 primaryXAxis: DateTimeAxis(
-                  interval: 30,
-                  intervalType: DateTimeIntervalType.days
-                ),
+                    interval: 30, intervalType: DateTimeIntervalType.days),
                 // Enable tooltip
-                tooltipBehavior: TooltipBehavior(enable: true),
+                tooltipBehavior: _tooltipBehavior,
                 series: <ChartSeries<SalesData, DateTime>>[
                   LineSeries<SalesData, DateTime>(
-                      enableTooltip: true,
-                      dataSource: <SalesData>[
-                        SalesData(DateTime(2020, 01, 31), 35),
-                        SalesData(DateTime(2020, 02, 28), 28),
-                        SalesData(DateTime(2020, 03, 31), 34),
-                        SalesData(DateTime(2020, 04, 30), 32),
-                        SalesData(DateTime(2020, 05, 31), 40)
-                      ],
-                      xValueMapper: (SalesData sales, _) => sales.date,
-                      yValueMapper: (SalesData sales, _) => sales.sales,
+                    enableTooltip: true,
+                    dataSource: <SalesData>[
+                      SalesData(DateTime(2020, 01, 31), 35),
+                      SalesData(DateTime(2020, 02, 28), 28),
+                      SalesData(DateTime(2020, 03, 31), 34),
+                      SalesData(DateTime(2020, 04, 30), 32),
+                      SalesData(DateTime(2020, 05, 31), 40)
+                    ],
+                    xValueMapper: (SalesData sales, _) => sales.date,
+                    yValueMapper: (SalesData sales, _) => sales.sales,
                   )
-                ]
-            ),
+                ]),
           ),
-        )
-    );
+        ));
   }
 }
 
@@ -94,4 +99,4 @@ class SalesData {
 
   final DateTime date;
   final double sales;
-}
+}