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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


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

    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

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon