imaNNeo / imaNNeo/fl_chart

When using clipData, the line gets fuzzy under certain conditions.

Open
#1,418 1 comment 1 reaction 0 assignees View on GitHub
Lack of Information Needs Reproducible Code
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
image

### No clipData
image

**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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.