Skip to content

[syncfusion_flutter_charts] Names with colon break trackball legend #2538

@DrNiels

Description

@DrNiels

Bug description

In my scenario, I have a series with a name that includes a colon. In combination with a trackball behavior using groupAllPoints, that corresponding line is left blank after the colored dot.

Steps to reproduce

  1. Load my example
  2. Hover over the chart until the trackball appears
  3. See that the label for the series is missing

Code sample

Code sample
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  _MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  List<_SalesData> data = [
    _SalesData('Jan', 35),
    _SalesData('Feb', 28),
    _SalesData('Mar', 34),
    _SalesData('Apr', 32),
    _SalesData('May', 40),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter chart')),
      body: SfCartesianChart(
        primaryXAxis: CategoryAxis(),
        // Chart title
        title: ChartTitle(text: 'Half yearly sales analysis'),
        // Enable legend
        legend: Legend(isVisible: true),
        // Enable tooltip
        tooltipBehavior: TooltipBehavior(enable: true),
        trackballBehavior: TrackballBehavior(
          enable: true,
          activationMode: ActivationMode.singleTap,
          tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
        ),
        series: <CartesianSeries<_SalesData, String>>[
          LineSeries<_SalesData, String>(
            dataSource: data,
            xValueMapper: (_SalesData sales, _) => sales.year,
            yValueMapper: (_SalesData sales, _) => sales.sales,
            name: 'Sales: (with colon)',
            // Enable data label
            dataLabelSettings: DataLabelSettings(isVisible: true),
          ),
        ],
      ),
    );
  }
}

class _SalesData {
  _SalesData(this.year, this.sales);

  final String year;
  final double sales;
}

Screenshots or Video

Screenshots / Video demonstration Image

Stack Traces

Stack Traces

Not applicable

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output
[√] Flutter (Channel stable, 3.41.7, on Microsoft Windows [Version 10.0.19045.6456], locale de-DE) [558ms]
    • Flutter version 3.41.7 on channel stable at C:\Users\Niels\fvm\versions\3.41.7
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cc0734ac71 (8 weeks ago), 2026-04-15 21:21:08 -0700
    • Engine revision 59aa584fdf
    • Dart version 3.11.5
    • DevTools version 2.54.2
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets,
      omit-legacy-version-file, enable-lldb-debugging, enable-uiscene-migration

[√] Windows Version (10 Education 64-bit, 22H2, 2009) [5,4s]

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [4,6s]
    • Android SDK at C:\Users\Niels\AppData\Local\Android\Sdk
    • Emulator version 35.5.10.0 (build_id 13402964) (CL:N/A)
    • Platform android-36, build-tools 35.0.0
    • Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[√] Chrome - develop for the web [129ms]
    • Chrome at C:\Users\Niels\AppData\Local\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2026 18.4.3) [127ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\18\Community
    • Visual Studio Community 2026 version 18.4.11626.88
    • Windows 10 SDK version 10.0.26100.0

[√] Connected device (3 available) [395ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.6456]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 149.0.7827.102
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 145.0.3800.97

[√] Network resources [559ms]
    • All expected network resources are available.

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions