We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback


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,

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;
}

Learning resources

Navigate to GitHub code used to configure the Flutter candle chart

GitHub Code

The Flutter Candle Chart configuration code is available in GitHub.

Navigate to the options available in User Guide to customize the Flutter candle chart

Flutter Candle Chart User Guide

Learn available options to customize the Flutter Candle Chart.

Navigate to the API references documentation of Flutter candle chart

Flutter Candle Chart API Reference

Explore the Flutter Candle Chart APIs.


Scroll up icon