Custom paint for data labels leaves render artifacts Declined - Not Valid

Hi,

I want to use a custom paint for my data labels. But when they are automatically hidden from not having enough space, it leaves part of it rendered in weird spots. The same happens when I use a Material widget with a custom shape. It's fine when I draw only the RRect without the polygon.


class _OutsiderShape extends CustomPainter {
  final Paint bookMarkPaint;
  Path path = Path();

  _OutsiderShape({Color color = Colors.white}) : bookMarkPaint = Paint() {
    bookMarkPaint.color = color;
    bookMarkPaint.style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromPoints(const Offset(0, 0), Offset(size.width, size.height - 12));
    path = Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 4)))
      ..addPolygon([
        Offset(rect.bottomCenter.dx - 8, rect.bottomCenter.dy),
        Offset(rect.bottomCenter.dx, rect.bottomCenter.dy + 6),
        Offset(rect.bottomCenter.dx + 8, rect.bottomCenter.dy),
      ], true);

    canvas.drawShadow(path, Colors.grey[900]!.withAlpha(90), 2.0, false);
    canvas.drawPath(path, bookMarkPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

DataLabelSettings:

DataLabelSettings getSettings() {
    return DataLabelSettings(
        isVisible: true,
        labelAlignment: ChartDataLabelAlignment.top,
        builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
          VitalwertChartData dataPoint = data as VitalwertChartData;

          return CustomPaint(
            painter: _OutsiderShape(color: dataPoint.value1Violation.getColorDefault(Colors.white)),
            child: Padding(
              padding: const EdgeInsets.only(left: 2.0, right: 2, top: 2, bottom: 14),
              child: Text(
                data.value.toString(),
                style: TextStyle(fontWeight: FontWeight.w700, color: dataPoint.value1Violation.isViolation ? Colors.white : Colors.black),
              ),
            ),
          );
        });
  }

The chart:
SfCartesianChart(
          plotAreaBackgroundColor: AppTheme.listBackground.withAlpha(200),
          primaryXAxis: CategoryAxis(
            interval: 1,
            labelPlacement: LabelPlacement.onTicks,
            axisLine: const AxisLine(width: 1),
          ),
          primaryYAxis: NumericAxis(
            rangePadding: ChartRangePadding.additional,
            labelFormat: '{value}',
            desiredIntervals: 5,
            minimum: 0,
            axisLine: const AxisLine(width: 1),
          ),
          legend: const Legend(isVisible: false),
          series: >[
            //StackedAreaSeries(dataSource: dataSource, xValueMapper: xValueMapper, yValueMapper: yValueMapper)

            AreaSeries(
              dataLabelSettings: getSettings(),
              color: Colors.blue,
              dataSource: realData,
              emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.gap),
              xValueMapper: (DataPoint data, _) => data.index,
              yValueMapper: (DataPoint data, _) => data.value,),

            AreaSeries(
                color: Colors.red.withAlpha(120),
                dataSource: realData,
                dataLabelSettings: getSettings(),
                emptyPointSettings: EmptyPointSettings(mode: EmptyPointMode.gap),
                xValueMapper: (DataPoint data, _) => data.index,
                yValueMapper: (DataPoint data, _) => data.value2),
          ])