about candlestick chart

[YOYO]

I want a function, assuming I have 300 candles, I want the initial screen to display only the first candle, and there is a button to control the screen to display the next data, and I can do it on the last data of the current screen some markers.



[Hariharasudhan Kanagaraj]

Hi YOYO,

We have analyzed your query and to achieve your requirement, you can use the public method updateDataSource with the help of ChartSeriesController. Here, we have added the candle segment with random values at the last index when the button is clicked.

If you have further details, please get back to us.

Kindly refer the below code snippet:

class _CustomWidgetState extends State<CustomWidget> {

  late ChartSeriesController _chartSeriesController;

  late List<ChartSampleData> _data;

  late Random random;

  int count = 1;

 

  @override

  void initState() {

    _data = [

      ChartSampleData(x: 1, high: 60, low: 30, open: 45, close: 35),

    ];

    random = Random();

    super.initState();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SfCartesianChart(

        primaryXAxis: NumericAxis(

          visibleMaximum: count.toDouble() + 1.0,

          interval: 1,

        ),

        primaryYAxis: NumericAxis(),

        series: <ChartSeries<ChartSampleData, num>>[

          CandleSeries<ChartSampleData, num>(

            enableSolidCandles: true,

            dataSource: _data,

            xValueMapper: (ChartSampleData sales, int index) => sales.x,

            highValueMapper: (ChartSampleData sales, int index) => sales.high,

            lowValueMapper: (ChartSampleData sales, int index) => sales.low,

            openValueMapper: (ChartSampleData sales, int index) => sales.open,

            closeValueMapper: (ChartSampleData sales, int index) => sales.close,

            onRendererCreated: (ChartSeriesController controller) {

              _chartSeriesController = controller;

            },

          ),

        ],

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () {

          addData();

          _chartSeriesController.updateDataSource(addedDataIndex: _data.length - 1);

        },

        child: const Icon(Icons.add),

      ),

    );

  }

 

  void addData() {

    if (_data.length > 10) {

      _data.removeAt(0);

      _chartSeriesController.updateDataSource(removedDataIndex: 0);

    }

    _data.add(

      ChartSampleData(

        x: count + 1,

        high: random.nextInt(80),

        low: random.nextInt(60),

        open: random.nextInt(50),

        close: random.nextInt(55),

      ),

    );

    setState(() {

      count += 1;

    });

  }

}

Also attached the recording below for your reference.

Regards,
Hari Hara Sudhan. K

Attachment: _183319_9d0525f3.zip