highcharts / highcharts/highcharts_flutter
Stickoncontact: Not working on Android
- 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