How to render Flutter candlestick chart using the charts widget (SfCartesianChart) ?
In this article, we explain how to render a candlestick chart using Syncfusion® Flutter Cartesian Chart widget.
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 these instructions to render a 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 ) ] )
To know more about candle chart, refer to the Syncfusion® Flutter Cartesian Charts user guide.
Screenshot
