How to Hide Tooltips for Truncated Axis Labels in Angular Charts?

This article explains how to hide Tooltips for truncated axis labels in Angular Charts. When axis labels are too long to fit within the chart area, they are automatically truncated with ellipses (…). By default, a tooltip appears on hover to display the full text of the truncated label. However, in some scenarios, you may want to suppress these tooltips, for example, to maintain a cleaner UI or reduce distractions.

You can target the tooltip element generated by the chart library. These tooltips typically have an ID ending with _EJ2_AxisLabel_Tooltip. By applying a simple CSS rule, you can hide these tooltips by setting their display property to none.

Code Example

style.css

div[id$='_EJ2_AxisLabel_Tooltip'] {
 display: none;
} 

This CSS selector uses the $= attribute selector to match any div element whose id ends with _EJ2_AxisLabel_Tooltip. By applying display: none, the tooltip will not be rendered in the DOM, effectively hiding it from view.

Live Sample

You can see this in action in the following StackBlitz demo:
Angular Chart Tooltip Suppression Sample

Conclusion

I hope you enjoyed learning about how to hide tooltips for truncated axis labels in Angular Charts.

You can refer to our Angular Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Angular Chart Documentation to understand how to present 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 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!