• Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.
Essential Studio
All Controls

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

This sample illustrates the Rio Olympic’s gold medal count by using smart labels in the chart. The smart label placement for a series can be shown, when it contains more of points.

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

In this example, you can see how to arrange the axis labels and how to trim the axis label smartly. When the Axis labels overlap with each other based on the chart dimensions and label size, you can use the labelIntersectAction property of the axis to avoid overlapping.

Chart supports the following, which can be set using labelIntersectAction property.

  • 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 intersects.
  • 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 supports three types of edge labels placement which can be set using the edgeLabelPlacement property.

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