Candlesticks with syncfusion in flutter

Question

I'm experimenting with syncfusion and trying to obtain a candlestick graph like shown in the documentation. Unfortunately when I try my code instead of seeing a candle a see an horizontal green line and I cannot understand why. I used the following code:

ChartData

class ChartData {
  double x;
  double open;
  double high;
  double low;
  double close;

  ChartData({this.x, this.open, this.high, this.low, this.close});
}

build method in my stateful widget

@override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(),
      body: SafeArea(
        child: Row(
          children: [
            Expanded(
              child: ListView(
                physics: BouncingScrollPhysics(),
                scrollDirection: Axis.horizontal,
                children: <Widget>[
                  Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Container(
                        width: MediaQuery.of(context).size.width * 3,
                        child: SfCartesianChart(
                            title: ChartTitle(text: "Candlesticks"),
                            primaryXAxis: NumericAxis(),
                            series: <ChartSeries>[
                              CandleSeries<ChartData, double>(
                                showIndicationForSameValues: true,
                                dataSource: <ChartData>[
                                  ChartData(
                                      // Open and close values are same
                                      x: 5,
                                      open: 86.3593,
                                      high: 88.1435,
                                      low: 84.3914,
                                      close: 86.3593),
                                ],
                                xValueMapper: (ChartData data, _) => data.x,
                                highValueMapper: (ChartData data, _) =>
                                    data.high,
                                lowValueMapper: (ChartData data, _) => data.low,
                                openValueMapper: (ChartData data, _) =>
                                    data.open,
                                closeValueMapper: (ChartData data, _) =>
                                    data.close,
                              )
                            ]),
                      )),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

Thanks for the help

score 0 · Answer 1 · edited Sep 29 '21 at 07:51

We have analyzed your query with the provided information at our end and we found that in the data source for the chart, the open and close values of the candle data point in same and due to this only, there is a horizontal line drawn for that data point to indicate that the open and close values are same. This is the default behaviour of the CandleSeries. Also, to mention that there is a property called the showIndicationForSameValues, which when enabled to true, a thin vertical line is drawn for the data point whose high and low values are the same. For further reference on the data point indication feature, please check the user guide below.

https://help.syncfusion.com/flutter/cartesian-charts/chart-types#indication-for-same-values-1

Also, we have shared our flutter examples GitHub repository link below which holds the demo samples of our Flutter widgets which will be helpful for experimenting the features available in our Flutter widgets. Syncfusion Flutter examples GitHub link: https://github.com/syncfusion/flutter-examples

Candlesticks with syncfusion in flutter

1 Answers1