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 OHLC Chart is like a candle chart. The horizontal lines at the left and right are used to show open and close values of the stock, and the vertical line represents high and low values. You can create beautiful, animated, real-time and high-performance OHLC chart that also supports the interactive features such as zooming and panning, trackball, crosshair, tooltip and selection.

Beautiful Flutter Open High Low Close Chart


Key features

Shows the bull and bear color customization

Bull and bear

Customizable bull and bear colors.

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

Zooming and scrolling

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

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

Technical indicators

Supports analyzing historical data and predicting future price movements using technical indicators.


Code example

Easily get started with the Flutter OHLC (Open High Low Close) 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';

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <CartesianSeries<SalesData, DateTime>>[
                            // Renders hiloOpenCloseSeries 
                            HiloOpenCloseSeries<SalesData, DateTime>(
                                dataSource: chartData,
                                xValueMapper: (SalesData sales, _) => sales.year,
                                lowValueMapper: (SalesData sales, _) => sales.low,
                                highValueMapper: (SalesData sales, _) => sales.high, 
                                openValueMapper: (SalesData sales, _) => sales.open,
                                closeValueMapper: (SalesData sales, _) => sales.close,

                            )
                        ]
                    )
                )   
            )
        );
    }

Learning resources

Navigate to GitHub code used to configure the Flutter ohlc chart

GitHub Code

The Flutter OHLC Chart configuration code is available in GitHub.

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

Flutter Open High Low Close (OHLC) Chart User Guide

Learn available options to customize the Flutter OHLC Chart.

Navigate to the API references documentation of Flutter OHLC Chart

Flutter OHLC Chart API Reference

Explore the Flutter OHLC Chart APIs.


Scroll up icon