Trading Charts OR Candle Charts in Flutter (RealTime Update)

First of all you have to make a simple flutter project in android studio.
Secondly, you have to import package in pubspec.yaml for using charts in flutter.

dependencies:
  flutter:
    sdk: flutter

  syncfusion_flutter_charts:

After that you have to make a model class for data, you will get from backend to show in charts.

class ChartSampleData {
  ChartSampleData({
    this.x,
    this.open,
    this.close,
    this.low,
    this.high,
  });

  final DateTime? x;
  final num? open;
  final num? close;
  final num? low;
  final num? high;
}

initialize this class in your Homepage class.

late List<ChartSampleData> _chartData;

Note: Flutter Machine Learning & AI Courses

If you want to build Machine Learning and AI based smart Flutter apps then check our Mobile Machine Learning courses on udemy. Avail 92% off with coupon code “MOBILEMLAI” only for a limited time

1. Flutter & ML : Train Tensorflow Lite models for Flutter Apps
2. Face Recognition and Detection in Flutter — The 2024 Guide
3. Flutter & OCR — Build Document Scanner Clone in Flutter
4. FlutterFlow for Beginners: Build “No Code” Apps in 2024
5. Flutter & Google Gemini — Build Chatbots and Assistants in Flutter
6. Train Image Classification Models & Build Smart Flutter Apps
7. Build Gallery App Clone in Flutter With Circle To Search Feature
8. Machine Learning for Flutter- The Complete 2024 Guide
9. Build Flutter Apps Effortlessly with ChatGPT — Zero Coding
10. Flutter & AI: Build Image & Art Generation Flutter App

Now, you have to make a list of ChartSampleData and assign some values to it for showing on chart in start.

@override
  void initState() {
    _chartData = getChartData();
    
    super.initState();
  }


List<ChartSampleData> getChartData() {
    return <ChartSampleData>[
      ChartSampleData(
          x: DateTime(2016, 01, 11),
          open: 98.97,
          high: 101.19,
          low: 95.36,
          close: 97.13),
    ];
}

Now, we use syncfusion charts widget in our scaffold tree.

SfCartesianChart(
              title: ChartTitle(text: 'AAPL - 2016'),
              legend: Legend(isVisible: true),
              trackballBehavior: _trackballBehavior,
              series: <CandleSeries>[
                CandleSeries<ChartSampleData, DateTime>(
                    dataSource: _chartData,
                    name: 'AAPL',
                    xValueMapper: (ChartSampleData sales, _) => sales.x,
                    lowValueMapper: (ChartSampleData sales, _) => sales.low,
                    highValueMapper: (ChartSampleData sales, _) => sales.high,
                    openValueMapper: (ChartSampleData sales, _) => sales.open,
                    closeValueMapper: (ChartSampleData sales, _) => sales.close)
              ],
              primaryXAxis: DateTimeAxis(
                  dateFormat: DateFormat.MMM(),
                  majorGridLines: MajorGridLines(width: 0)),
              primaryYAxis: NumericAxis(
                  minimum: 70,
                  maximum: 130,
                  interval: 10,
                  numberFormat: NumberFormat.simpleCurrency(decimalDigits: 0)),
            )

In above code, we can assign title to show on top of chart. In series parameter, we will assign our _chartData list to SfCartesianChart. After that there are two parameters of primaryXAxis and primaryYAxis to customize it on Chart.
There is a trackball behavior also which is used to track the value of chart on certain points. We have to declare and assign it in initState method and then give it to SfCartesianChart.

late TrackballBehavior _trackballBehavior;

  @override
  void initState() {
    _chartData = getChartData();
    _trackballBehavior = TrackballBehavior(
        enable: true, activationMode: ActivationMode.singleTap);
    super.initState();
  }

Complete Code for static candle chart show.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<ChartSampleData> _chartData;
  late TrackballBehavior _trackballBehavior;

  @override
  void initState() {
    _chartData = getChartData();
    _trackballBehavior = TrackballBehavior(
        enable: true, activationMode: ActivationMode.singleTap);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: SfCartesianChart(
              title: ChartTitle(text: 'AAPL - 2016'),
              legend: Legend(isVisible: true),
              trackballBehavior: _trackballBehavior,
              series: <CandleSeries>[
                CandleSeries<ChartSampleData, DateTime>(
                    dataSource: _chartData,
                    name: 'AAPL',
                    xValueMapper: (ChartSampleData sales, _) => sales.x,
                    lowValueMapper: (ChartSampleData sales, _) => sales.low,
                    highValueMapper: (ChartSampleData sales, _) => sales.high,
                    openValueMapper: (ChartSampleData sales, _) => sales.open,
                    closeValueMapper: (ChartSampleData sales, _) => sales.close)
              ],
              primaryXAxis: DateTimeAxis(
                  dateFormat: DateFormat.MMM(),
                  majorGridLines: MajorGridLines(width: 0)),
              primaryYAxis: NumericAxis(
                  minimum: 70,
                  maximum: 130,
                  interval: 10,
                  numberFormat: NumberFormat.simpleCurrency(decimalDigits: 0)),
            )
        ));
  }

  List<ChartSampleData> getChartData() {
    return <ChartSampleData>[
      ChartSampleData(
          x: DateTime(2016, 01, 11),
          open: 98.97,
          high: 101.19,
          low: 95.36,
          close: 97.13),
      ChartSampleData(
          x: DateTime(2016, 01, 18),
          open: 98.41,
          high: 101.46,
          low: 93.42,
          close: 101.42),
      ChartSampleData(
          x: DateTime(2016, 01, 25),
          open: 101.52,
          high: 101.53,
          low: 92.39,
          close: 97.34)
    ];
  }
}

class ChartSampleData {
  ChartSampleData({
    this.x,
    this.open,
    this.close,
    this.low,
    this.high,
  });

  final DateTime? x;
  final num? open;
  final num? close;
  final num? low;
  final num? high;
}

Output:

Now, it is time to add new data in list to update the chart with time interval of 1 second.

For time interval of 1 second, we will use Timer in initState method.

@override
  void initState() {
    _chartData = getChartData();
    _trackballBehavior = TrackballBehavior(
        enable: true, activationMode: ActivationMode.singleTap);
    super.initState();
    // Start the timer to update chart data every second
    Timer.periodic(Duration(seconds: 1), (Timer timer) {
      addChartData();
    });
  }

For adding chartData, we will use _randomSmallIncrement() method to generate any random number within specified rangea and adding it to list.

void addChartData() {
    final DateTime lastDate = _chartData.last.x!;
    final newDate = lastDate.add(Duration(seconds: 1)); // Increment by 1 second for live data

    // Get the previous close price to generate new prices based on it
    final prevClose = _chartData.last.close!;
    final random = Random();

    // Simulate realistic price movements (randomly either up or down)
    final direction = random.nextBool() ? 1 : -1; // Randomly decide if price goes up or down
    final newOpen = prevClose + _randomSmallIncrement() * direction;
    final newHigh = newOpen + _randomSmallIncrement();
    final newLow = newOpen - _randomSmallIncrement();
    final newClose = newOpen + (_randomSmallIncrement() * (random.nextBool() ? 1 : -1)); // Random up or down

    setState(() {
      // Add new data point at the end of the list
      _chartData.add(ChartSampleData(
        x: newDate,
        open: newOpen,
        high: newHigh,
        low: newLow,
        close: newClose,
      ));

      // Remove the first data point if the list exceeds the selected max number of candles
      if (_chartData.length > _maxCandles) {
        _chartData.removeAt(0);
      }
    });
  }



double _randomSmallIncrement() {
    return Random().nextDouble() * 0.5; // Small increment to simulate realistic trading data
  }

In the last, we can also add two drop down widgets. One is to select the range of vertical axis for zoom in and zoom out the chart view. And the other is to control the number of candles showing on chart at that time.
Use values of these dropdowns in horizontal and vertical axis of SfCartesian widget.

Complete final code is here for you to just copy paste and run it in your emulator.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<ChartSampleData> _chartData;
  late TrackballBehavior _trackballBehavior;

  int _maxCandles = 20; // Default number of candles
  List<int> _candleOptions = [10, 20, 30, 50]; // Candle count options

  RangeValues _verticalRange = RangeValues(70, 130); // Default Y-axis range
  List<RangeValues> _rangeOptions = [
    RangeValues(60, 140),
    RangeValues(70, 130),
    RangeValues(80, 120),
    RangeValues(90, 110),
    RangeValues(95, 105),
    RangeValues(100, 110),
    RangeValues(95, 100),
    RangeValues(100, 105),
  ]; // Dropdown options for Y-axis range

  @override
  void initState() {
    _chartData = getChartData();
    _trackballBehavior = TrackballBehavior(
        enable: true, activationMode: ActivationMode.singleTap);
    super.initState();
    // Start the timer to update chart data every second
    Timer.periodic(Duration(seconds: 1), (Timer timer) {
      addChartData();
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text("Candle Chart"),
              actions: [
                // Dropdown for selecting number of candles
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: DropdownButton<int>(
                    value: _maxCandles,
                    items: _candleOptions.map((int value) {
                      return DropdownMenuItem<int>(
                        value: value,
                        child: Text('$value Candles'),
                      );
                    }).toList(),
                    onChanged: (int? newValue) {
                      setState(() {
                        _maxCandles = newValue!;
                      });
                    },
                  ),
                ),
                // Dropdown for selecting Y-axis range
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: DropdownButton<RangeValues>(
                    value: _verticalRange,
                    items: _rangeOptions.map((RangeValues range) {
                      return DropdownMenuItem<RangeValues>(
                        value: range,
                        child: Text(
                            'Y: ${range.start.toInt()} - ${range.end.toInt()}'),
                      );
                    }).toList(),
                    onChanged: (RangeValues? newValue) {
                      setState(() {
                        _verticalRange = newValue!;
                      });
                    },
                  ),
                ),
              ],
            ),
            body: SfCartesianChart(
              title: ChartTitle(text: 'AAPL - 2016'),
              legend: Legend(isVisible: true),
              trackballBehavior: _trackballBehavior,
              series: <CandleSeries>[
                CandleSeries<ChartSampleData, DateTime>(
                    dataSource: _chartData,
                    name: 'AAPL',
                    xValueMapper: (ChartSampleData sales, _) => sales.x,
                    lowValueMapper: (ChartSampleData sales, _) => sales.low,
                    highValueMapper: (ChartSampleData sales, _) => sales.high,
                    openValueMapper: (ChartSampleData sales, _) => sales.open,
                    closeValueMapper: (ChartSampleData sales, _) => sales.close)
              ],
              primaryXAxis: DateTimeAxis(
                  dateFormat: DateFormat.MMM(),
                  majorGridLines: MajorGridLines(width: 0)),
              primaryYAxis: NumericAxis(
                  minimum: _verticalRange.start,
                  maximum: _verticalRange.end,
                  interval: 10,
                  numberFormat: NumberFormat.simpleCurrency(decimalDigits: 0)),
            )));
  }

  void addChartData() {
    final DateTime lastDate = _chartData.last.x!;
    final newDate = lastDate.add(Duration(seconds: 1)); // Increment by 1 second for live data

    // Get the previous close price to generate new prices based on it
    final prevClose = _chartData.last.close!;
    final random = Random();

    // Simulate realistic price movements (randomly either up or down)
    final direction = random.nextBool() ? 1 : -1; // Randomly decide if price goes up or down
    final newOpen = prevClose + _randomSmallIncrement() * direction;
    final newHigh = newOpen + _randomSmallIncrement();
    final newLow = newOpen - _randomSmallIncrement();
    final newClose = newOpen + (_randomSmallIncrement() * (random.nextBool() ? 1 : -1)); // Random up or down

    setState(() {
      // Add new data point at the end of the list
      _chartData.add(ChartSampleData(
        x: newDate,
        open: newOpen,
        high: newHigh,
        low: newLow,
        close: newClose,
      ));

      // Remove the first data point if the list exceeds the selected max number of candles
      if (_chartData.length > _maxCandles) {
        _chartData.removeAt(0);
      }
    });
  }

  double _randomSmallIncrement() {
    return Random().nextDouble() * 0.5; // Small increment to simulate realistic trading data
  }

  List<ChartSampleData> getChartData() {
    return <ChartSampleData>[
      ChartSampleData(
          x: DateTime(2016, 01, 11),
          open: 98.97,
          high: 101.19,
          low: 95.36,
          close: 97.13),
      // Additional initial data points go here...
    ];
  }
}

class ChartSampleData {
  ChartSampleData({
    this.x,
    this.open,
    this.close,
    this.low,
    this.high,
  });

  final DateTime? x;
  final num? open;
  final num? close;
  final num? low;
  final num? high;
}

Output:

Note: Flutter Machine Learning & AI Courses

If you want to build Machine Learning and AI based smart Flutter apps then check our Mobile Machine Learning courses on udemy. Avail 92% off with coupon code “MOBILEMLAI” only for a limited time

1. Flutter & ML : Train Tensorflow Lite models for Flutter Apps
2. Face Recognition and Detection in Flutter — The 2024 Guide
3. Flutter & OCR — Build Document Scanner Clone in Flutter
4. FlutterFlow for Beginners: Build “No Code” Apps in 2024
5. Flutter & Google Gemini — Build Chatbots and Assistants in Flutter
6. Train Image Classification Models & Build Smart Flutter Apps
7. Build Gallery App Clone in Flutter With Circle To Search Feature
8. Machine Learning for Flutter- The Complete 2024 Guide
9. Build Flutter Apps Effortlessly with ChatGPT — Zero Coding
10. Flutter & AI: Build Image & Art Generation Flutter App