Range Annotations not Affected by ClipData

[PvtPuddles]

If I pass clipData and rangeAnnotations, I expect the range annotations to be clipped according to that data.

As of 0.69.0, this is no longer the case. If there are range annotations that exceed the bounds of the chart, they will be displayed on top of the axes labels regardless of the desired clip behavior.

Reverting to 0.68.0 restores the expected behavior.

To Reproduce

main.dart

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Range Annotations',
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Annotation Overflow"),
        ),
        body: const ErrorChart(),
      ),
    );
  }
}

class ErrorChart extends StatelessWidget {
  const ErrorChart({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return LineChart(
      LineChartData(
          minX: 0,
          maxX: 5,
          clipData: const FlClipData.all(),
          titlesData: FlTitlesData(
            leftTitles: AxisTitles(
              axisNameSize: 48,
              axisNameWidget:
                  Text("Left Side", style: theme.textTheme.titleLarge),
            ),
            rightTitles: AxisTitles(
              axisNameSize: 48,
              axisNameWidget:
                  Text("Right Side", style: theme.textTheme.titleLarge),
            ),
          ),
          rangeAnnotations: RangeAnnotations(verticalRangeAnnotations: [
            VerticalRangeAnnotation(
                x1: -1, x2: 3, color: Colors.green.withAlpha(120)),
            VerticalRangeAnnotation(
                x1: 4, x2: 6, color: Colors.red.withAlpha(120)),
          ]),
          lineBarsData: [
            LineChartBarData(spots: [
              FlSpot(-1, 0),
              FlSpot(0, 3),
              FlSpot(1, 2),
              FlSpot(2, 4),
              FlSpot(3, 3),
            ], color: Colors.red),
            LineChartBarData(spots: [
              FlSpot(4, 1),
              FlSpot(5, 3),
              FlSpot(6, 2),
            ], color: Colors.green),
          ]),
    );
  }
}

Screenshots

Versions

Flutter 3.24.4 • channel stable • https://github.com/flutter/flutter.git Framework • revision 603104015d (5 days ago) • 2024-10-24 08:01:25 -0700 Engine • revision db49896cf2 Tools • Dart 3.5.4 • DevTools 2.37.3

fl_chart: dependency: "direct main" source: hosted version: "0.69.0"

[mgramley]

Any update on this? I'm having this problem as well

[PvtPuddles]

Any update on this? I'm having this problem as well

Not that I've seen. The simplest work-around is to use the copyWith to manually clamp your annotations to the chart area.

I dug around a little bit, and it seems that if you make your chart zoomable via a FlTransformationConfig, then when the chart is zoomed in the annotations will be clipped. The zoomed-in clip behavior doesn't seem to be customizable either, so the annotations and lines will be clipped even if the chart's clipData is FlClipData.none().