imaNNeo / imaNNeo/fl_chart

Impossible to apply ClipData just for LineChartBarData instead of all elements in LineChartData

Open
#1,874 0 comments 0 reactions 0 assignees View on GitHub
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.

![Image](https://github.com/user-attachments/assets/c36ab2f8-46a3-4e95-a0c0-fe2e14cb11fc)

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();
}

```

![Image](https://github.com/user-attachments/assets/8ae06af1-9123-40f0-81db-f2fe95926a9d)

![Image](https://github.com/user-attachments/assets/56e10ef1-8fb5-4aa0-8571-94cc872e26dc)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.