Zoom behavior is different

[Bar Ilan]

Hi, im using zoom only in X axis

primaryXAxis: DateTimeCategoryAxis(
    zoomFactor: 0.2,
    zoomPosition: 0.45,

and at the first its look like this:

but when i scroll/ touch the chart its look like this:

the candles look bigger.

is it possible to make candles bigger from the beginning before scrolling ?

Thanks.

[Hariharasudhan Kanagaraj]

Hi Bar IIan,

You can achieve your requirement by setting the anchorRangeToVisiblePoints property in the y axis to false. The default value of the anchorRangeToVisiblePoints property is true, which means that the range of the y axis is calculated based on the visible data points. However, when you set the anchorRangeToVisiblePoints property to false, the range of the y axis will be calculated based on all the data points provided.

Kindly refer the below code snippet:

class _MyHomePageState extends State<MyHomePage> {

  late List<ChartSampleData> _data;

  late ZoomPanBehavior _zoomPanBehavior;

 

  @override

  void initState() {

    _data = [

      ChartSampleData(

        x: DateTime(2000, 01, 01, 05),

        high: 20,

        low: 50,

        open: 35,

        close: 45,

      ),

      // ... (the rest of the data entries)

      ChartSampleData(

        x: DateTime(2000, 01, 02, 24),

        high: 120,

        low: 90,

        open: 100,

        close: 110,

      ),

    ];

 

    _zoomPanBehavior = ZoomPanBehavior(

      enablePanning: true,

      enableMouseWheelZooming: true,

      zoomMode: ZoomMode.x,

    );

 

    super.initState();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SfCartesianChart(

        primaryXAxis: DateTimeAxis(

          intervalType: DateTimeIntervalType.hours,

        ),

        primaryYAxis: NumericAxis(

          anchorRangeToVisiblePoints: false,

        ),

        series: <CartesianSeries<ChartSampleData, DateTime>>[

          CandleSeries(

            dataSource: _data,

            enableSolidCandles: true,

            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,

          ),

        ],

        zoomPanBehavior: _zoomPanBehavior,

      ),

    );

  }

}

Also shared the recording below for your reference. If you have further queries, please get back to us.

Regards,
Hari Hara Sudhan. K.

Attachment: _183771_56d0701e.zip