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

How to render Flutter candlestick chart using the charts widget (SfCartesianChart) ?

Platform: Flutter |
Control: SfCartesianChart |
Published Date: January 19, 2021 |
Last Revised Date: April 12, 2021

In this article, we explained how to render the candlestick chart.

 

Our Cartesian chart widget provides financial chart support. The candlestick provides information about the open, close, high and low price over a particular period. Here if the opening price is higher than the closing price, the candle is filled and if the closing is higher than the opening price, then candle is unfilled. The wick at top represents the highest price and the wick at lower represents the lowest price of a particular period.

Follow the below instructions to render the candlestick chart.

Step 1: Initialize the required data source with x, open, high, low and close values.

List<ChartSampleData> chartData = [
    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),
    ChartSampleData(
        x: DateTime(2016, 02, 01),
        open: 96.47,
        high: 97.33,
        low: 93.69,
        close: 94.02),
    ChartSampleData(
        x: DateTime(2016, 02, 08),
        open: 93.13,
        high: 96.35,
        low: 92.59,
        close: 93.99),
    ChartSampleData(
        x: DateTime(2016, 02, 15),
        open: 95.02,
        high: 98.89,
        low: 94.61,
        close: 96.04),
    ChartSampleData(
        x: DateTime(2016, 02, 22),
        open: 96.31,
        high: 98.0237,
        low: 93.32,
        close: 96.91),
    ChartSampleData(
        x: DateTime(2016, 02, 29),
        open: 96.86,
        high: 103.75,
        low: 96.65,
        close: 103.01),
    ChartSampleData(
        x: DateTime(2016, 03, 07),
        open: 102.39,
        high: 102.83,
        low: 100.15,
        close: 102.26),
    ChartSampleData(
        x: DateTime(2016, 03, 16),
        open: 106.5,
        high: 106.5,
        low: 106.5,
        close: 106.5),
  ];

 

Step 2: Initialize the SfCartesianChart widget with the candle series and map the required parameters i.e xValueMapper , lowValueMapper, highValueMapper, openValueMapper, and closeValueMapper.

 SfCartesianChart(
    series: <ChartSeries<ChartSampleData, DateTime>>[
        CandleSeries<ChartSampleData, DateTime>(
          dataSource: chartData,
          // To bind x value
          xValueMapper: (ChartSampleData sales, _) => sales.x,
          // To bind low value
          lowValueMapper: (ChartSampleData sales, _) => sales.low,
          // To bind high value
          highValueMapper: (ChartSampleData sales, _) => sales.high,
          // To bind open value
          openValueMapper: (ChartSampleData sales, _) => sales.open,
          // To bind close value
          closeValueMapper: (ChartSampleData sales, _) => sales.close
        )
    ]
)

 

Now render the candlestick chart. To know more about candle chart, find the user guide. https://help.syncfusion.com/flutter/cartesian-charts/chart-types#candle

 

Screenshot

 

candle_chart

 

View the sample in GitHub.

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow 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