Tooltip overlapping with graph axis

[Dhruvam]

The tooltip is overlapping with the graph. Sometimes it doesn't overlap but sometimes it does.

Below is the code for the SfCartesianChart that I am using.

SfCartesianChart(
  enableAxisAnimation: true,
  plotAreaBorderColor: CommonColors.transparentColor,
  trackballBehavior: TrackballBehavior(
    // Enables the trackball
    enable: true,
    tooltipDisplayMode: TrackballDisplayMode.nearestPoint,
    activationMode: ActivationMode.singleTap,
    shouldAlwaysShow: false,
    lineColor: CommonColors.disabledTextColor,
    lineWidth: 2,
    hideDelay: 5000,
    tooltipSettings: InteractiveTooltip(
      enable: true,
      color: (isYesBid
              ? CommonColors.yesBidColor
              : CommonColors.noBidColor)
          .withOpacity(0.5),
      canShowMarker: false,
      format: 'point.y . point.x',
      textStyle: CommonTextStyles.getBlackTextStyleLight(context)
          .copyWith(
        fontSize: 10,
        color: isYesBid
            ? CommonColors.yesBidColor
            : CommonColors.noBidColor,
      ),
    ),
    markerSettings: TrackballMarkerSettings(
      height: 14,
      width: 14,
      color: (isYesBid
          ? CommonColors.yesBidColor
          : CommonColors.noBidColor),
      markerVisibility: TrackballVisibilityMode.visible,
    ),
  ),
  primaryXAxis: CategoryAxis(
    axisLine: AxisLine(
      color: CommonColors.disabledTextColor,
      width: 2,
    ),
    majorGridLines: MajorGridLines(
      color: CommonColors.transparentColor,
    ),
    labelStyle:
        CommonTextStyles.getMediumTextStyleDark(context).copyWith(
      fontSize: 12,
      color: CommonColors.darkGrayColor,
    ),
  ),
  primaryYAxis: NumericAxis(
    axisLine: AxisLine(
      color: CommonColors.transparentColor,
      width: 2,
    ),
    labelFormat: '${CommonUrls.rupeeSymbol}{value}',
    majorGridLines: MajorGridLines(
      color: CommonColors.cardBorderColor,
      dashArray: const [5, 5],
      width: 1,
    ),
    labelStyle:
        CommonTextStyles.getMediumTextStyleDark(context).copyWith(
      fontSize: 12,
      color: CommonColors.darkGrayColor,
    ),
  ),
  series: <SplineSeries<ChartEntity, String>>[
    SplineSeries<ChartEntity, String>(
      dataSource:
          Provider.of<PriceChartProviderModel>(context).chartData,
      color: (isYesBid
          ? CommonColors.yesBidColor
          : CommonColors.noBidColor),
      width: 3,
      xValueMapper: (ChartEntity data, _) => data.time,
      yValueMapper: (ChartEntity data, _) => data.price,
    ),
  ],
)

[Sriram Kiran Senthilkumar]

Hi Dhruvam,

Greetings from Syncfusion.

We have checked your query with the provided code snippet at our end, and we found that you have applied the opacity for the tooltip’s background with the same series color. Due to the trackball tooltip’s text and series line’s color are the same, the tooltip text appears to be overlapped by the chart series.

However, you can resolve this issue by changing the tooltip background color so that the tooltip will not appear overlapping.

Please check and get back to us if you require further assistance.

Regards,

Sriram Kiran

[Dhruvam]

Hi,

Thank you for your prompt reply.

The opacity is a design specification from our design team. What I want to do is that the tooltip should always appear at the top/bottom of the graph line, like how it is in the second image of my question.

I could not see a parameter to set the position.

[Sriram Kiran Senthilkumar]

Hi Dhruvam,

We have checked your query at our end, and we would like to let you know that the trackball’s tooltipAlignment can be changed only when the trackballTooltipDisplay mode is set to “groupAllPoints” and not applicable for other display modes. This is the current default behavior.

If you want to change the tooltip alignment, then we suggest using the “groupAllPoints” tooltip display mode and using the tooltipAligment property to align the trackball’s tooltip in the chart. Also appended the user guide documentations links for reference.

1. https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#label-display-mode
2. https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#label-alignment

Please check and get back to us if you require further assistance.

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sriram Kiran