Track ball line strange behavior

[IslamShawky]

Code sample

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:icap_ui_components/utils/extensions/string_date_format_extension.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:intl/intl.dart';
import '../../../../utils/app_colors.dart';
import '../../../../utils/app_text_styles.dart';
import 'data_model.dart';

class ChartWidget extends StatelessWidget {
  final List<ChartData> chartData;
  final bool isCandleStick;
  final bool showLineAndCandle;

  const ChartWidget({
    super.key,
    required this.chartData,
    required this.isCandleStick,
    this.showLineAndCandle = false,
  });

  List<ChartData> _getSampledDataForColumnChart() {
    const int numberOfColumns = 48;
    List<ChartData> sampledData = [];

    if (chartData.isEmpty) {
      final now = DateTime.now();
      for (int i = 0; i < numberOfColumns; i++) {
        sampledData.add(
          ChartData(now.add(Duration(days: i)), 0.0, 0.0, 0.0, 0.0),
        );
      }
    } else {
      for (int i = 0; i < numberOfColumns; i++) {
        int originalIndex;
        if (chartData.length == 1) {
          originalIndex = 0;
        } else {
          double ratio = i / (numberOfColumns - 1); // 0.0 to 1.0
          originalIndex = (ratio * (chartData.length - 1)).round();
        }
        sampledData.add(chartData[originalIndex]);
      }
    }
    return sampledData;
  }

  @override
  Widget build(BuildContext context) {
    final List<ChartData> columnChartDataSample =
        _getSampledDataForColumnChart();

    return Column(
      children: [
        SfCartesianChart(
          borderWidth: 0,
          plotAreaBorderWidth: 0,
          backgroundColor: AppColors.white,
          margin: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
          primaryXAxis: DateTimeAxis(
            majorGridLines: const MajorGridLines(width: 0),
            minorGridLines: const MinorGridLines(width: 0),
            majorTickLines: const MajorTickLines(width: 0),
            minorTickLines: const MinorTickLines(width: 0),
            axisLine: const AxisLine(width: 0),
            labelStyle: const TextStyle(fontSize: 0),
            intervalType: DateTimeIntervalType.auto,
            interval: 1,
            edgeLabelPlacement: EdgeLabelPlacement.shift,
          ),
          primaryYAxis: NumericAxis(
            majorGridLines: const MajorGridLines(width: 0),
            minorGridLines: const MinorGridLines(width: 0),
            majorTickLines: const MajorTickLines(width: 0),
            minorTickLines: const MinorTickLines(width: 0),
            axisLine: const AxisLine(width: 0),
            labelStyle: TextStyle(
              color: AppColors.greyTextColor,
              fontSize: 10,
              fontFamily: 'Inter',
            ),
            numberFormat: NumberFormat.compact(),
            opposedPosition: true,
            initialVisibleMinimum: chartData.isNotEmpty
                ? chartData
                      .map((data) => data.low)
                      .reduce((a, b) => math.min(a, b))
                : 0.0,
          ),
          tooltipBehavior: TooltipBehavior(
            enable: !isCandleStick ? true : false,
            canShowMarker: true,
            elevation: 8,
            duration: 3000,
            color: AppColors.white,
            tooltipPosition: TooltipPosition.pointer,
            builder: (data, point, series, pointIndex, seriesIndex) =>
                Container(
                  height: 45.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.r),
                    color: AppColors.white,
                  ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(
                      horizontal: 9.w,
                      vertical: 5.h,
                    ),
                    child: IntrinsicWidth(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(top: 4.h),
                            child: Icon(
                              Icons.circle,
                              size: 5.r,
                              color: AppColors.chartGreen,
                            ),
                          ),
                          SizedBox(width: 5.w),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                point.x.toString().toFormattedDayMonthYear(),
                                style: AppTextStyles.regular(
                                  10.sp,
                                  color: AppColors.grey6Color,
                                ),
                              ),
                              Text(
                                "${point.y!.toStringAsFixed(2)} SAR",
                                style: AppTextStyles.medium(
                                  12.sp,
                                  color: AppColors.black,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(width: 5.w),
                        ],
                      ),
                    ),
                  ),
                ),
          ),
          trackballBehavior: isCandleStick
              ? null
              : TrackballBehavior(
                  enable: true,
                  activationMode: ActivationMode.singleTap,
                  lineType: TrackballLineType.vertical,
                  lineDashArray: const <double>[6, 4],
                  lineColor: AppColors.greyTextColor.withValues(alpha: 0.5),
                  lineWidth: 1,
                  tooltipDisplayMode: TrackballDisplayMode.floatAllPoints,
                  hideDelay: 3000,
                  tooltipSettings: const InteractiveTooltip(
                    enable: true,
                    arrowLength: 0,
                    arrowWidth: 0,
                    color: Colors.white,
                    connectorLineWidth: 0,
                    borderWidth: 1,
                    borderRadius: 8,
                    decimalPlaces: 6,
                  ),
                  markerSettings: TrackballMarkerSettings(
                    markerVisibility: TrackballVisibilityMode.visible,
                    height: 14,
                    width: 14,
                    color: AppColors.chartGreen,
                    borderColor: AppColors.white,
                    borderWidth: 2,
                    shape: DataMarkerType.image,
                    image: AssetImage("assets/images/chart_point.png"),
                  ),
                  builder: (context, trackballDetails) =>
                      const SizedBox.shrink(),
                ),
          series: <CartesianSeries>[
            if (isCandleStick)
              CandleSeries<ChartData, DateTime>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                openValueMapper: (ChartData data, _) => data.open,
                highValueMapper: (ChartData data, _) => data.high,
                lowValueMapper: (ChartData data, _) => data.low,
                closeValueMapper: (ChartData data, _) => data.close,
                enableSolidCandles: true,
                bearColor: AppColors.chartRed,
                bullColor: AppColors.chartGreen,
                width: 1,
                borderWidth: 1.0,
                spacing: 0.5,
                animationDuration: 500,
              )
            else
              LineSeries<ChartData, DateTime>(
                dataSource: chartData,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.close,
                color: AppColors.chartGreen,
                width: 2,
                animationDuration: 500,
                enableTooltip: true,
              ),
          ],
        ),
        SizedBox(
          height: 30.h,
          child: SfCartesianChart(
            borderWidth: 0,
            plotAreaBorderWidth: 0,
            backgroundColor: AppColors.white,
            margin: const EdgeInsets.only(right: 10, bottom: 0, left: 10),
            primaryXAxis: CategoryAxis(
              majorGridLines: const MajorGridLines(width: 0),
              majorTickLines: const MajorTickLines(width: 0),
              axisLine: const AxisLine(width: 0),
              labelStyle: const TextStyle(fontSize: 0),
              arrangeByIndex: true,
            ),
            primaryYAxis: NumericAxis(
              majorGridLines: const MajorGridLines(width: 0),
              minorGridLines: const MinorGridLines(width: 0),
              majorTickLines: const MajorTickLines(width: 0),
              minorTickLines: const MinorTickLines(width: 0),
              axisLine: const AxisLine(width: 0),
              labelStyle: const TextStyle(fontSize: 0),
              numberFormat: NumberFormat.compact(),
              opposedPosition: true,
              initialVisibleMinimum: 0.0,
            ),
            series: <CartesianSeries>[
              ColumnSeries<ChartData, String>(
                dataSource: columnChartDataSample, // Using sampled data
                xValueMapper: (ChartData data, int index) => index.toString(),
                yValueMapper: (ChartData data, _) => data.close,
                color: AppColors.lightColumnChartColor,
                animationDuration: 500,
                enableTooltip: true,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

[IslamShawky]

I don't know where this green vertical line come from

Screen.Recording.2025-10-02.at.1.21.39.PM.mov

[BPraveenBalu]

Hi @IslamShawky,

We have analyzed your code and found that the issue occurs because you are using const SizedBox.shrink() inside the trackballBehavior.builder. A const widget is treated as a compile-time constant and does not rebuild when the trackball updates, which prevents proper widget rebuilding and can cause rendering artifacts like the green vertical line. To fix this, simply remove the const keyword from SizedBox.shrink(). This ensures the widget rebuilds on every trackball update, allowing the chart to render the trackball line correctly. We have shared the modified code snippet for reference.

Code snippet:

trackballBehavior: isCandleStick
? null
: TrackballBehavior(
  enable: true,
  ...
  ...
  builder: (context, trackballDetails) => SizedBox.shrink(),
),

Demo:

Please let us know if you need further assistance.

Regards,
Praveen Balu.

[IslamShawky]

Thank you for your support. the issue is resolved.