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

[iamiota]

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

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<DemoPage> {
  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

[imaNNeo]

I couldn't reproduce it on my macBook. What device are you using?

https://github.com/imaNNeo/fl_chart/assets/7009300/abc9bc68-aae6-4844-8cdc-3b4d1743092a