highcharts / highcharts/highcharts_flutter

Stickoncontact: Not working on Android

Open
#75 2 comments 0 reactions 0 assignees View on GitHub
bug planned
Dominant language
Dart
Stars
12
Forks
3
PR merge metrics
No merged PRs in 30d

Description

### Expected behaviour

When stickOnContact: true, I expect the drag finger movement show the tooltip while the finger is being dragged. This seems to work on ios but not on Android:

https://github.com/user-attachments/assets/59e5bef1-292a-4fe6-a75f-0d949b0d5ffe

https://github.com/user-attachments/assets/b5c728cf-324e-4190-b7eb-e9b7e3324fb7

### Actual behaviour

Just like on ios, android should also support showing tooltip when tapping and dragging the finger.

### Version

1.1.2

### Affected devices/platforms

Android

### Relevant log output

```shell

```

### Relevant code snippet

```dart
return Consumer(
builder: (context, graphDataInteractionProvider, child) {
var extraTolerance = 0.5;
return SwipeDetector(
onSwipeLeft: () {
if (!graphDataInteractionProvider.isGraphInteractionEnabled) {
onSwipeLeft();
}
},
onSwipeRight: () {
if (!graphDataInteractionProvider.isGraphInteractionEnabled) {
onSwipeRight();
}
},
child: Center(
child: AspectRatio(
aspectRatio: MediaQuery.of(context).orientation ==
Orientation.landscape
? MediaQuery.of(context).devicePixelRatio.roundToDouble() +
extraTolerance
: 1.1,
child: Container(
margin: const EdgeInsets.fromLTRB(0, 15, 0, 5),
child: Consumer(
builder: (context, graphDataProvider, child) {
if (graphDataProvider.isLoading) {
return const LoadingIndicator();
} else {
final dayGraphData = graphDataProvider.dayGraphData;
if (dayGraphData == null) {
return Center(child: Text("No data available"));
}

// Convert customLineBarsData to Highcharts series
List seriesList =
dayGraphData.customLineBarsData.map((lineData) {
List> chartData = lineData.spots
?.map((spot) => [spot.x, spot.y])
.toList() ??
[];
Color channelColor =
getChartColor(lineData.channel).first;
String colorHex =
'#${channelColor.value.toRadixString(16).substring(2)}';

return HighchartsAreaSeries(
name: lineData.channel ?? 'Unknown',
data: chartData,
options: HighchartsAreaSeriesOptions(
lineWidth: 1.4,
threshold: 0,
color: colorHex,
),
);
}).toList();

final unit = graphDataProvider.isCostEnabled
? EDeviceUnits.cost.displayName
: getSelectedDeviceUnit(selectedDevice).displayName;
final chartKey = ValueKey(
'${dayGraphData.date}_${dayGraphData.deviceId}_${graphDataProvider.isCostEnabled}_${dayGraphData.customLineBarsData.length}',
);

return HighchartsChart(
key: chartKey,
keepAlive: true,
debug: false,
HighchartsOptions(
time: HighchartsTimeOptions(
timezone: 'Europe/Amsterdam'),
chart: HighchartsChartOptions(
type: 'area',
animation: {
'duration': 400,
'easing': 'easeOutBounce',
},
),
legend: HighchartsLegendOptions(
enabled: false,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
),
title: HighchartsTitleOptions(text: ''),
xAxis: [
HighchartsXAxisOptions(
min: 0,
max: 24,
tickInterval: 4,
lineWidth: 0,
tickWidth: 0,
zoomEnabled: false,
crosshair: HighchartsXAxisCrosshairOptions(
width: 1,
color:
'#${Theme.of(context).colorScheme.primary.value.toRadixString(16).substring(2, 8)}',
dashStyle: 'Solid',
snap: true,
zIndex: 5),
labels: HighchartsXAxisLabelsOptions(
enabled: true,
format: '{value}:00',
style: HighchartsXAxisLabelsStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
gridLineWidth: 0,
gridLineDashStyle: 'Dash',
)
],
yAxis: [
HighchartsYAxisOptions(
zoomEnabled: false,
panningEnabled: false,
title: HighchartsYAxisTitleOptions(
margin: 0,
text: unit,
style: HighchartsXAxisTitleStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
min: dayGraphData.minY,
max: dayGraphData.maxY,
opposite: true,
gridLineWidth: 1.0,
gridLineColor:
'#${Theme.of(context).colorScheme.onSurface.toARGB32().toRadixString(16).substring(2, 8)}', // Blue labels

labels: HighchartsYAxisLabelsOptions(
enabled: true,
format: '{value}',
style: HighchartsXAxisLabelsStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
gridLineDashStyle: 'Dash',
),
],
series: seriesList,
plotOptions: HighchartsPlotOptions(
area: HighchartsAreaSeriesOptions(
animation: {
'duration': 400,
'easing': 'swing',
},
marker: HighchartsSeriesMarkerOptions(
enabled: false,
states: HighchartsSeriesMarkerStatesOptions(
normal:
HighchartsSeriesMarkerStatesNormalOptions(),
select:
HighchartsSeriesMarkerStatesSelectOptions(
enabled: true,
radius: 3,
fillColor: '#ffffff'),
),
),
),
series: HighchartsSeriesOptions(
stickyTracking: false,
point: HighchartsSeriesPointOptions(
events: HighchartsSeriesPointEventsOptions(
click: HighchartsCallback(
(args) {
debugPrint(
'Point clicked: ${args.first['x']}, ${args.first['y']}',
);
},
),
),
),
),
),
tooltip: HighchartsTooltipOptions(
shared: true,
useHTML: true,
followTouchMove: true,
stickOnContact: true,
headerFormat: '{point.key:,.2f}
',
split: true,
pointFormat:
' {series.name}: {point.y:,.3f} $unit
',
),
credits: HighchartsCreditsOptions(enabled: false)
// chart:
));
}
},
),
),
),
),
);
},
)
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the HighchartsChart configuration in the report, focusing on tooltip options such as followTouchMove and stickOnContact and how touch events are handled on Android. Reproduce the graph interaction on Android, then verify that dragging a finger shows the tooltip as it does on iOS without regressing iOS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
data-visualization, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.