highcharts / highcharts/highcharts_flutter
afterSetExtremes not triggering
- Dominant language
- Dart
- Stars
- 12
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
### Expected behaviour
When scrolled to the end of the bars, we should receive a callback for updating the new data.
We need to implement lazy loading for the bar chart so that when the user scrolls to the end of the currently available data, new data is automatically fetched and appended to the existing series.
### Actual behaviour
When scrolled to the end of the bars, we are not getting callback eventhough we reached the end of the x-axis.
### Version
1.1.2
### Affected devices/platforms
Web with Chrome
### Relevant log output
```shell
NA
```
### Relevant code snippet
```dart
import 'package:flutter/material.dart';
import 'package:highcharts_flutter/highcharts.dart';
class FiiExpChart extends StatelessWidget {
FiiExpChart({super.key});
// Chart data for easy replacement with API data in the future
final List categories = List.generate(50, (index) => 'Day $index');
final List> fiiData = List>.generate(50, (index) => [index, 50000 + (index % 3 == 0 ? 30000 : index % 2 == 0 ? 10000 : -20000) + (index * 1500) % 250000]);
final List> diiData = List>.generate(50, (index) => [index, -30000 + (index % 3 == 0 ? -15000 : index % 2 == 0 ? 20000 : -10000) + (index * 800) % 180000]);
final List> splineData = List>.generate(50, (index) => [index, (index % 2 == 0 ? 20000 : -20000) + (index * 300) % 400000]);
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
HighchartsChart(
HighchartsOptions(
chart: HighchartsChartOptions(
type: 'column',
scrollablePlotArea: HighchartsChartScrollablePlotAreaOptions(
// On intial load its right scroll and on widget reload its left scroll need to check the issue !
scrollPositionX: 1,
minWidth: fiiData.length * 75
)
),
xAxis: [
HighchartsXAxisOptions(
range: 50,
events: HighchartsXAxisEventsOptions(
afterSetExtremes: HighchartsCallback((event) => print('afterSetExtremes: $event')),
),
min: 0,
max: fiiData.length-1,
categories: categories,
),
],
legend: HighchartsLegendOptions(
enabled: false
),
yAxis: [
HighchartsYAxisOptions(
title: HighchartsYAxisTitleOptions(
text: ''),
),
],
tooltip: HighchartsTooltipOptions(
shared: true,
),
plotOptions: HighchartsPlotOptions(
spline: HighchartsSplineSeriesOptions(
marker: HighchartsSeriesMarkerOptions(
enabled: false,
)
),
column: HighchartsColumnSeriesOptions(
pointWidth: 20
),
),
series: [
HighchartsColumnSeries(
options: HighchartsColumnSeriesOptions(
color: "#0277B6"
),
name: 'FII',
data: fiiData,
),
HighchartsColumnSeries(
options: HighchartsColumnSeriesOptions(
color: "#9D6807"
),
name: 'DII',
data: diiData,
),
HighchartsSplineSeries(
name: 'Nifty 50',
options: HighchartsSplineSeriesOptions(
color: '#2434E7',
lineWidth: 2,
),
data: splineData,
)
],
),
),
],
),
);
}
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the provided HighchartsChart configuration and trace the xAxis afterSetExtremes callback while reproducing horizontal scrolling in Chrome. Confirm that reaching the end of the scrollable plot invokes the Dart callback; done when this callback fires reliably for the shown configuration and can trigger the stated lazy-loading behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100