Tooltip builder not behaving as expected when using initial visible min value
I am using a custom tooltip builder, so that, i can give different string values depending on the chart data y value.
The tooltip label values are as follows:
"blank" is when the value is null (grey points)
"missed" is when the value is 0
"x points" is when the value is not 0 nor null
I am also using an initial visible min value, so that the graph is initially panned all the way to the right.
When the graph first builds, (and the graph with the min value is showed) tooltips show abnormal behaviour, showing only
"blank" and "missed", in incorrect places.
But as soon as i pan the graph, so that the visible min value changes, tooltip behave as expected.
Here is the graph initially built, with the initial visible min value:
The tooltip labels (in order, from left to right) in the image, are as follows
missed, missed, missed, missed, missed, blank, blank, missed
Here is the graph, slightly panned to the left:
Here the tooltip labels are correct and the values are as follows
12 points, blank, blank, 12 points, missed, missed, missed, missed
Here is another graph, using the same settings, showing that the "blank"
value can also be in a non zero, non null y value
Here is the code for the sfCartesianChart
SfCartesianChart _getVerticalGradientAreaChart() {
bool isMarkerVisible = isScopeMonthly ? true : false;
return SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enablePanning: true,
),
margin: EdgeInsets.all(0),
plotAreaBorderWidth: 0,
primaryXAxis: DateTimeAxis(
visibleMinimum: DateTime(
DateTime.now().year,
DateTime.now().month,
DateTime.now().day,
).subtract(
Duration(
days: isScopeMonthly ? 7 : 60,
),
),
minimum: DateTime.now().subtract(
Duration(days: isScopeMonthly ? 28: 365),
),
maximum: DateTime(
DateTime.now().year,
DateTime.now().month,
DateTime.now().day,
).add(
Duration(hours: 12),
),
edgeLabelPlacement: EdgeLabelPlacement.none,
interval: isScopeMonthly ? 2 : 0.5,
intervalType: isScopeMonthly
? DateTimeIntervalType.days
: DateTimeIntervalType.months,
placeLabelsNearAxisLine: false,
labelAlignment: LabelAlignment.center,
labelRotation: -45,
majorGridLines: MajorGridLines(width: 0),
isVisible: true,
),
primaryYAxis: NumericAxis(
maximum: widget.maxValue + widget.maxValue / 3,
minimum: -widget.maxValue / 3,
interval: widget.maxValue / 3,
isVisible: true,
labelStyle: TextStyle(color: Colors.transparent, fontSize: 0),
rangePadding: ChartRangePadding.additional,
labelFormat: '{value}',
axisLine: AxisLine(width: 0),
),
series: _getGradientAreaSeries(isMarkerVisible),
tooltipBehavior: TooltipBehavior(
color: Colors.black,
enable: isScopeMonthly ? true : false,
format: 'point.y',
header: '',
canShowMarker: false,
builder: (data, point, series, pointIndex, seriesIndex) {
final ChartDataDateTime chartDate = data;
final String seriesName = series.name;
final double pointValue = chartDate.y;
final bool isMainSeries =
series.name.trim() == widget.graphs[0].name.trim();
String getLabel() {
if (isMainSeries) {
if (pointValue == null) {
return "Blank";
} else if (pointValue == 0) {
return "Missed";
} else {
return "${pointValue.toInt()} points";
}
} else {
double _pointValue = pointValue ?? 0;
return "$seriesName: ${_pointValue.toInt()}";
}
}
return Container(
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5),
),
child: Padding(
padding: const EdgeInsets.all(5.5),
child: Text(
getLabel(),
style: TextStyle(color: Colors.white),
),
),
);
},
),
onTooltipRender: (TooltipArgs args) {
print("rendered tooltip");
},
);
}
If only i could pan the graph slightly when the graph loads, the problem would be solved,
that would be enough, but i dont know if that would have unexpected side effects, like cancelling
the animation, or performance problems
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
