Flutter Candle Chart | Candlestick Chart

Overview

The Flutter Candle Chart visualizes financial data and shows the trends at equal intervals. It can be often combined with line and column charts to show the close and volume of the data. You can create beautiful, animated, real-time and high-performance candle chart that also supports the interactive features such as zooming and panning, trackball, crosshair, tooltip and selection.

Beautiful Flutter Candle Chart

Key features

Shows the Flutter hollow or filled type in candle chart

Hollow and filled

Configure the hollow or filled type in Flutter Candle Chart to view stock data from a different perspective.

The Flutter Candle chart provides zooming and scrolling support to view the particular region

Zooming and scrolling

The Flutter Candle Chart Supports zooming and scrolling when dealing with large amount of data to visualize the data point in any region.

The Flutter Candle chart uses the technical indicator to predict the future price movements

Technical indicators

Supports analyzing historical data and predicting future price movements.

Flutter Candle chart shows shows the bull and bear color customization

Bull and bear

Customize the bull and bear market colors in a Flutter Candle Chart.

Code example

Easily get started with the Flutter Candle Chart using a few simple lines of DART code example as demonstrated below,

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

void main() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      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> {
  late List<_ChartData> data;
  late TooltipBehavior _tooltip;

  @override
  void initState() {
    data = [
      _ChartData('CHN', 38, 10, 21, 29),
      _ChartData('GER', 32, 12, 19, 30),
      _ChartData('RUS', 37, 7, 17, 24),
      _ChartData('BRZ', 34, 9, 16, 27),
      _ChartData('IND', 35, 13, 18, 31)
    ];
    _tooltip = TooltipBehavior(enable: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter chart'),
        ),
        body: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            primaryYAxis: NumericAxis(minimum: 0, maximum: 40, interval: 10),
            tooltipBehavior: _tooltip,
            series: <CartesianSeries<_ChartData, String>>[
              CandleSeries<_ChartData, String>(
                  dataSource: data,
                  xValueMapper: (_ChartData data, _) => data.x,
                  highValueMapper: (_ChartData data, _) => data.high,
                  lowValueMapper: (_ChartData data, _) => data.low,
                  openValueMapper: (_ChartData data, _) => data.open,
                  closeValueMapper: (_ChartData data, _) => data.close,
                  name: 'Gold',
                )]));
  }
}

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

  final String x;
  final double high;
  final double low;
  final double open;
  final double close;
}