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
