imaNNeo / imaNNeo/fl_chart

Range Annotations not Affected by ClipData

Open
#1,763 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
Dart
Stars
7.6k
Forks
2k
Avg merge
9d 1h
Merged PRs (30d)
2

Description

If I pass `clipData` and `rangeAnnotations`, I expect the range annotations to be clipped according to that data.

As of 0.69.0, this is no longer the case. If there are range annotations that exceed the bounds of the chart, they will be displayed on top of the axes labels regardless of the desired clip behavior.

Reverting to 0.68.0 restores the expected behavior.

**To Reproduce**

main.dart
```
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Range Annotations',
theme: ThemeData(useMaterial3: true),
home: Scaffold(
appBar: AppBar(
title: const Text("Annotation Overflow"),
),
body: const ErrorChart(),
),
);
}
}

class ErrorChart extends StatelessWidget {
const ErrorChart({super.key});

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);

return LineChart(
LineChartData(
minX: 0,
maxX: 5,
clipData: const FlClipData.all(),
titlesData: FlTitlesData(
leftTitles: AxisTitles(
axisNameSize: 48,
axisNameWidget:
Text("Left Side", style: theme.textTheme.titleLarge),
),
rightTitles: AxisTitles(
axisNameSize: 48,
axisNameWidget:
Text("Right Side", style: theme.textTheme.titleLarge),
),
),
rangeAnnotations: RangeAnnotations(verticalRangeAnnotations: [
VerticalRangeAnnotation(
x1: -1, x2: 3, color: Colors.green.withAlpha(120)),
VerticalRangeAnnotation(
x1: 4, x2: 6, color: Colors.red.withAlpha(120)),
]),
lineBarsData: [
LineChartBarData(spots: [
FlSpot(-1, 0),
FlSpot(0, 3),
FlSpot(1, 2),
FlSpot(2, 4),
FlSpot(3, 3),
], color: Colors.red),
LineChartBarData(spots: [
FlSpot(4, 1),
FlSpot(5, 3),
FlSpot(6, 2),
], color: Colors.green),
]),
);
}
}
```

**Screenshots**

Screenshot 2024-10-29 at 2 39 10 PM

**Versions**

Flutter 3.24.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 603104015d (5 days ago) • 2024-10-24 08:01:25 -0700
Engine • revision db49896cf2
Tools • Dart 3.5.4 • DevTools 2.37.3

fl_chart:
dependency: "direct main"
source: hosted
version: "0.69.0"

Contributor guide

Open the contributing guide

Research direction

Start with the main.dart reproduction and compare the rangeAnnotations and clipData behavior between fl_chart 0.68.0 and 0.69.0. Trace how LineChartData renders VerticalRangeAnnotation bounds, then verify that annotations outside minX and maxX are clipped without covering the axis labels. Add or update a regression test if the repository provides chart rendering tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.