I’m utilizing the Syncfusion Flutter Charts package deal to show a line chart of knowledge for various time ranges (day, week, month, 12 months). I exploit initialVisibleMinimum
and initialVisibleMaximum
to manage the seen vary of the chart. Nevertheless, after I change between time ranges, the seen window dimension doesn’t replace accurately. For instance:
- If I choose “Day,” the seen vary is at some point (as anticipated).
- After I change to “Week,” the x-axis labels replace accurately, however the seen vary stays constrained to at some point.
If I manually set minimal
and most
as an alternative of initialVisibleMinimum
/initialVisibleMaximum
, I lose the power to scroll the chart, which isn’t what I need.
Beneath is the related a part of my code:
SfCartesianChart(
primaryXAxis: DateTimeAxis(
majorGridLines: const MajorGridLines(width: 0),
desiredIntervals: _getDesiredIntervals(), // Dynamically set intervals
interval: _getDynamicInterval(), // Dynamically regulate the interval
intervalType: _getDateTimeIntervalType(),
minimal: firstDate.subtract(const Period(days: 1)), // Set axis minimal
most: latestDate.add(const Period(days: 1)), // Set axis most
initialVisibleMaximum: most, // Set preliminary seen most
initialVisibleMinimum: minimal, // Set preliminary seen minimal
labelRotation: 45,
axisLabelFormatter: (AxisLabelRenderDetails particulars) {
last DateTime date = DateTime.fromMillisecondsSinceEpoch(particulars.worth.toInt());
return ChartAxisLabel(
DateFormat(_getDateFormat()).format(date),
const TextStyle(fontSize: 12),
);
},
),
primaryYAxis: NumericAxis(),
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
zoomMode: ZoomMode.x,
),
tooltipBehavior: TooltipBehavior(allow: true),
sequence: >[
LineSeries(
dataSource: vitalDataContainer.vitalData,
xValueMapper: (VitalData data, _) => data.time,
yValueMapper: (VitalData data, _) =>
data.values.isNotEmpty ? data.values.first as num : 0,
dataLabelSettings: const DataLabelSettings(isVisible: true),
name: 'Vital Data',
),
],
);
I calculate the minimal and most values dynamically based mostly on the chosen time vary, like this:
(DateTime, DateTime) _getVisibleRange(DateTime latestDate) {
late DateTime minimal, most;
change (timeSegmentedControlValue) {
case TimeSegmentedControlValue.day:
minimal = latestDate.subtract(const Period(days: 1));
most = latestDate.add(const Period(hours: 24));
break;
case TimeSegmentedControlValue.week:
minimal = latestDate.subtract(const Period(days: 6));
most = latestDate.add(const Period(days: 1));
break;
case TimeSegmentedControlValue.month:
minimal = latestDate.subtract(const Period(days: 29));
most = latestDate.add(const Period(days: 1));
break;
case TimeSegmentedControlValue.12 months:
minimal = latestDate.subtract(const Period(days: 364));
most = latestDate.add(const Period(days: 1));
break;
}
return (minimal, most);
}
Setting Particulars:
- Flutter model: 3.24.5 (steady channel)
- Dart model: 3.5.4
- Syncfusion Flutter Chart model: ^28.1.33
Query:
How can I be sure that initialVisibleMinimum and initialVisibleMaximum replace dynamically when switching time ranges whereas nonetheless permitting panning and zooming?
I’ve connected screenshots exhibiting how the labels replace accurately however the seen vary doesn’t change. Any recommendation or options could be drastically appreciated!