How to render Flutter candlestick chart using the charts widget (SfCartesianChart) ?
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: <CandleSeries<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
