How to Hide Tooltip for Truncated Data Labels in Angular Pie Chart?

In Angular Pie Charts, when a data label exceeds the available space, it is automatically truncated with an ellipsis (…). By default, the chart library displays a tooltip showing the full text of the truncated label when hovered. While this behavior helps users see the complete label, there may be scenarios where you want to suppress this tooltip, for example, to maintain a minimal UI or avoid distractions.

To disable the tooltip that appears for truncated data labels, you can apply a simple CSS rule. The tooltip element used by the chart typically has an ID ending with _EJ2_Datalabel_Tooltip. Using a CSS attribute selector, you can target this element and set its display property to none, effectively hiding it.

Code Example

<style>
   div[id$='_EJ2_Datalabel_Tooltip'] {
       display: none;
   }
</style> 

This rule uses the $= selector to match any div whose id ends with _EJ2_Datalabel_Tooltip, which is specific to the tooltip generated for truncated data labels. By setting display: none, the tooltip will no longer appear, even when the label is shortened.

Sample

You can see a working example of this implementation in the following StackBlitz sample: Live Demo

Conclusion

I hope you enjoyed learning about how to hide tooltip for truncated data labels in Angular Pie Chart.

You can refer to our Angular Pie Chart’s feature tour page to learn about its other groundbreaking feature representations and Documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pie Chart example to understand how to create and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Pie Chart and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!