SfCartesianChart with CandleSeries issues with initial Y axis interval and Trackball RangeError

[david zeng]

Hello Syncfusion team,

On my chart, the panning on X axis is enabled, i'm facing 2 issues:

1. The initial interval range and values are incorrect for the Y axis:
primaryYAxis: NumericAxis(
enableAutoIntervalOnZooming: false,
anchorRangeToVisiblePoints: true,
rangePadding: ChartRangePadding.round,
desiredIntervals: 4,
),


but after scrolling the X axis, the interval updates and are fine.

2. The trackball works correctly initially but after scrolling the X axis, the trackball triggers RangeError 

   RangeError (index): Invalid value: Not in inclusive range 0..60: 481

I'm running the app on android.

flutter --version

Flutter 3.7.12 • channel stable • https://github.com/flutter/flutter.git

Framework • revision 4d9e56e694 (3 weeks ago) • 2023-04-17 21:47:46 -0400

Engine • revision 1a65d409c7

Tools • Dart 2.19.6 • DevTools 2.20.1

Dependencies:

syncfusion_flutter_charts: ^21.2.3
intl: ^0.18.1
http: ^0.13.6

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() async {
final candles = await http
.get(Uri.parse(
'https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1m'))
.then(
(response) => (jsonDecode(response.body) as List<dynamic>)
.map((candle) => Candle.fromList(candle as List<dynamic>))
.toList(),
);

runApp(
MaterialApp(
title: 'My App',
home: MyApp(candles: candles),
),
);
}

class Candle {
const Candle({
required this.openTime,
required this.open,
required this.high,
required this.low,
required this.close,
});

final DateTime openTime;
final double open;
final double high;
final double low;
final double close;

factory Candle.fromList(List<dynamic> list) {
return Candle(
openTime: DateTime.fromMillisecondsSinceEpoch(list[0] as int),
open: double.parse(list[1] as String),
high: double.parse(list[2] as String),
low: double.parse(list[3] as String),
close: double.parse(list[4] as String),
);
}
}

class MyApp extends StatelessWidget {
const MyApp({
Key? key,
required this.candles,
}) : super(key: key);

final List<Candle> candles;

@override
Widget build(BuildContext context) {
return SfCartesianChart(
trackballBehavior: TrackballBehavior(
enable: true,
activationMode: ActivationMode.longPress,
tooltipSettings: const InteractiveTooltip(enable: true),
),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
zoomMode: ZoomMode.x,
),
primaryXAxis: DateTimeAxis(
dateFormat: DateFormat.Hm(),
autoScrollingMode: AutoScrollingMode.end,
autoScrollingDelta: 35,
autoScrollingDeltaType: DateTimeIntervalType.minutes,
intervalType: DateTimeIntervalType.minutes,
interval: 5,
),
primaryYAxis: NumericAxis(
enableAutoIntervalOnZooming: false,
anchorRangeToVisiblePoints: true,
rangePadding: ChartRangePadding.round,
desiredIntervals: 4,
),
series: [
CandleSeries<Candle, DateTime>(
dataSource: candles,
xValueMapper: (Candle data, _) => data.openTime,
lowValueMapper: (Candle data, _) => data.low,
highValueMapper: (Candle data, _) => data.high,
openValueMapper: (Candle data, _) => data.open,
closeValueMapper: (Candle data, _) => data.close,
),
],
);
}
}

Thanks for your attention.

​David

[Lokesh Palani]

Hi David,

We have checked your query and we are unable to access the JSON data which is shared by you. Therefore, we kindly request that you share the data points or exact call stack with us. This will help us to assist you in a better way.

Regards,

Lokesh.