import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class Datum {
  double y;
  DateTime x;

  Datum({
    this.x,
    this.y,
  });
}

List<Datum> data = [
  Datum(x: DateTime(2019, 8, 1), y: 20.1),
  Datum(x: DateTime(2019, 8, 3), y: 14.5),
  Datum(x: DateTime(2019, 8, 4), y: 17.7),
  Datum(x: DateTime(2019, 8, 5), y: 31.3),
  Datum(x: DateTime(2019, 8, 6), y: 12.8),
];

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
//      body: chart(),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return chart();
        },
      ),
    );
  }
}

SfCartesianChart chart() {
  return SfCartesianChart(
    series: [
      SplineSeries<Datum, DateTime>(
        dataSource: data,
        xValueMapper: (Datum datum, int index) => datum.x,
        yValueMapper: (Datum datum, int index) => datum.y,
        markerSettings: MarkerSettings(
          isVisible: true,
        ),
      ),
    ],
    primaryXAxis: DateTimeAxis(
      zoomPosition: 1,
      zoomFactor: 0.25,
    ),
    zoomPanBehavior: ZoomPanBehavior(
      enablePanning: true,
      zoomMode: ZoomMode.x,
    ),
  );
}