When using clipData, the line gets fuzzy under certain conditions.
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
**Describe the bug**
Thank you for providing such a great library!
When clipData is set to `FlClipData.all()`, the line exhibits jagged edges. I have experimented with various parameters and found that a combination of `barWidth` and `FlDotCirclePainter's radius` can trigger this issue. In this particular example, `barWidth` is set to `2.0` and `FlDotCirclePainter's radius` is set to `3.0`.
P.S. The simulator I am using is iPhone 14, when I set the `FlDotCirclePainter's radius` to `3.1`, the line becomes smooth again with clipData.
**To Reproduce**
````dart
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
class DemoPage extends StatefulWidget {
const DemoPage({Key? key}) : super(key: key);
@override
DemoPageState createState() => DemoPageState();
}
class DemoPageState extends State {
bool useClipData = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 128.0),
child: AspectRatio(
aspectRatio: 4 / 3,
child: LineChart(LineChartData(
gridData: const FlGridData(show: false),
clipData: useClipData ? const FlClipData.all() : null,
lineBarsData: [
LineChartBarData(
isCurved: true,
barWidth: 2.0,
dotData: FlDotData(getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(radius: 3.0);
}),
spots: const [FlSpot(1, 1), FlSpot(2, 3), FlSpot(3, 1.5), FlSpot(4, 0.5)],
)
],
)),
),
),
SwitchListTile(
title: const Text('Use clipData'),
value: useClipData,
contentPadding: EdgeInsets.zero,
dense: true,
onChanged: (bool? value) {
setState(() {
useClipData = value!;
});
},
),
],
),
),
);
}
}
````
**Screenshots**
### Using clipData
### No clipData
**Versions**
- which version of the Flutter are you using? `3.10.6`
- which version of the FlChart are you using? `0.63.0`
Contributor guide
Research direction
No source file or test is named. Start by running the provided Flutter reproduction and compare FlClipData.all() with clipping disabled while varying barWidth and FlDotCirclePainter radius; done means the specified barWidth 2.0 and radius 3.0 combination renders a smooth line with clipping enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100