• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Smart Axis Labels in ASP.NET Core Chart Control

This example shows the smart label placement for the chart axis labels.

DEMO
SOURCE
Intersect Action:
Edge Label Placement:
Label Position:
Enable Trim:
Maximum Label Width:

In this example, you can see how the axis labels are smartly arranged when they overlap with each other using the LabelIntersectAction property in the axis.

The following are the LabelIntersectAction property values and their behaviors:

  • Hide - Hide the label when it intersects.
  • Trim - Trim the label when it intersects.
  • Wrap - Wrap the label when it intersects.
  • MultipleRows - Arrange the label in multiple row when it intersect.
  • Rotate45 - Rotate the label to 45 degree when it intersects.
  • Rotate90 - Rotate the label to 90 degree when it intersects.
  • None - Shows all the labels.

Chart handles edge labels placement using the EdgeLabelPlacement property. Its values and their behaviors are:

  • None - No action is performed.
  • Hide - Edge label is hidden.
  • Shift - Shifts the edge labels.

More information on the smart axis labels can be found in this documentation section.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE