Welcome to the Flutter feedback portal. We’re happy you’re here! If you have feedback on how to improve the Flutter, we’d love to hear it!>
Thanks for joining our community and helping improve Syncfusion products!
The date time label is not showing when the screen was initialized. It show properly after user pinching.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_core/core.dart';
void main() {
// Register your license here
SyncfusionLicense.registerLicense(null);
return runApp(ChartApp());
}
class ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Chart Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter chart'),
),
body: SfCartesianChart(
series: [
SplineSeries<Datum, DateTime>(
name: 'Water Level',
dataSource: [
Datum(DateTime(2020, 2, 12), 43),
Datum(DateTime(2020, 2, 13), 42),
Datum(DateTime(2020, 2, 14), 41),
Datum(DateTime(2020, 2, 15), 44),
Datum(DateTime(2020, 2, 16), 44),
Datum(DateTime(2020, 2, 17), 45),
Datum(DateTime(2020, 2, 18), 41),
Datum(DateTime(2020, 2, 19), 43),
Datum(DateTime(2020, 2, 20), 20),
Datum(DateTime(2020, 2, 21), 38),
Datum(DateTime(2020, 2, 22), 36),
Datum(DateTime(2020, 2, 23), 39),
Datum(DateTime(2020, 2, 24), 40),
Datum(DateTime(2020, 2, 25), 40),
],
xValueMapper: (Datum datum, int index) => datum.dateTime,
yValueMapper: (Datum datum, int index) => datum.value,
markerSettings: MarkerSettings(
isVisible: true,
),
),
],
primaryXAxis: DateTimeAxis(
zoomPosition: 1,
zoomFactor: 0.25,
),
primaryYAxis: NumericAxis(
labelFormat: '{value} mm',
plotBands: [
PlotBand(
start: 20,
end: 30,
color: Colors.amber,
opacity: 0.2,
text: 'level 1',
textStyle: ChartTextStyle(
color: Colors.black,
),
),
PlotBand(
start: 30,
end: 40,
color: Colors.orange,
opacity: 0.2,
text: 'level 2',
textStyle: ChartTextStyle(
color: Colors.black,
),
),
PlotBand(
start: 40,
color: Colors.red,
opacity: 0.2,
text: 'level 3',
textStyle: ChartTextStyle(
color: Colors.black,
),
),
],
),
tooltipBehavior: TooltipBehavior(
enable: true,
),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
enablePinching: true,
zoomMode: ZoomMode.x,
),
),
);
}
}
class Datum {
DateTime dateTime;
double value;
Datum(
this.dateTime,
this.value,
);
}