Impossible to apply ClipData just for LineChartBarData instead of all elements in LineChartData
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
Hi guys,
Impossible to apply **ClipData** just for **LineChartBarData** instead of all elements in **LineChartData**
Also `clipData: const FlClipData(top: true, bottom: false, left: true, right: true),` never works correctly, it works like `FlClipData.all()`
The FlClipData(top: true, bottom: false, left: true, right: true) works like FlClipData.all(). So, It clips the LineChartBarData but also the VerticalLine.
Expected: I'd like Clip just the LineChartBarData.

Simple example code:
```dart
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('fl_chart VerticalLine with Picture')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: LineChartWidget(),
),
),
);
}
}
class LineChartWidget extends StatefulWidget {
@override
_LineChartWidgetState createState() => _LineChartWidgetState();
}
class _LineChartWidgetState extends State {
ui.Picture? _customPicture;
@override
void initState() {
super.initState();
_generateCustomPicture();
}
Future _generateCustomPicture() async {
final picture = createCustomPicture();
setState(() {
_customPicture = picture;
});
}
@override
Widget build(BuildContext context) {
return _customPicture == null
? const Center(child: CircularProgressIndicator())
: LineChart(
LineChartData(
minX: 2,
lineBarsData: [
LineChartBarData(
spots: const [FlSpot(1, 2), FlSpot(3, 4), FlSpot(5, 3), FlSpot(7, 5)],
color: Colors.blue,
barWidth: 3,
),
],
lineTouchData: const LineTouchData(enabled: false),
// FlClipData(top: true, bottom: false, left: true, right: true)
// doesn't work correctly. It works like FlClipData.all() It clips the LineChartBarData
// but also the VerticalLine. I'd like Clip just the LineChartBarData
// clipData: const FlClipData(top: true, bottom: false, left: true, right: true),
extraLinesData: ExtraLinesData(
verticalLines: [
VerticalLine(
x: 5,
color: Colors.red,
strokeWidth: 2,
sizedPicture: SizedPicture(_customPicture!, 40, 20),
),
],
),
),
);
}
}
ui.Picture createCustomPicture() {
final recorder = ui.PictureRecorder();
final canvas = Canvas(recorder);
final paint = Paint()
..color = Colors.red
..style = PaintingStyle.fill;
canvas.drawCircle(const Offset(20, 20), 20, paint);
return recorder.endRecording();
}
```


Contributor guide
Research direction
Reproduce the issue with the provided LineChart, LineChartData, LineChartBarData, and ExtraLinesData example, then trace how clipData is applied alongside VerticalLine rendering. Done means the requested clip settings affect only LineChartBarData while the VerticalLine remains unclipped; the all-sides behavior should also be corrected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100