Axis Labels in ASP.NET Core Chart Component
18 Nov 20182 minutes to read
Smart Axis Labels
When the axis labels overlap with each other, you can use labelIntersectAction property in the axis, to place them smartly.
When setting labelIntersectAction as Hide
When setting labelIntersectAction as Rotate45
When setting labelIntersectAction as Rotate90
Axis Labels Positioning
By default, the axis labels can be placed outside the axis line and this also can be placed inside the axis line using the labelPosition property.
Multilevel Labels
Any number of levels of labels can be added to an axis using the multiLevelLabels property. This property can be configured using the following properties:
• Categories
• Overflow
• Alignment
• Text style
• Border
Categories
Using the categories property, you can configure the start, end, text, and maximumTextWidth of multilevel labels.
Overflow
Using the overflow property, you can trim or wrap the multilevel labels.
Alignment
The alignment property provides option to position the multilevel labels at far, center, or near.
Text customization
The textStyle property of multilevel labels provides options to customize the size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment and textOverflow.
Border customization
Using the border property, you can customize the width, color, and type. The type of border are Rectangle, Brace, WithoutBorder, WithoutTopBorder, WithoutTopandBottomBorder and CurlyBrace.
Edge Label Placement
Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use edgeLabelPlacement property in axis, which moves the label inside the chart area for better appearance or hides it. By default, the edgeLabelPlacement property is set to Shift to ensure that labels are shifted inside the chart area, avoiding any overlap or coincidence.
Labels Customization
The labelStyle property of an axis provides options to customize the color, font-family, font-size and font-weight of the axis labels.
Customizing Specific Point
You can customize the specific text in the axis labels using axisLabelRender event.
Trim using maximum label width
You can trim the label using enableTrim property and width of the labels can also be customized using maximumLabelWidth property in the axis, the value maximum label width is 34 by default.
Line break support
Line break feature used to customize the long axis label text into multiple lines by using <br> tag. Refer the following example in that dataSource x value contains long text, it breaks into two lines by using <br> tag.
Maximum Labels
MaximumLabels property is set, then the labels will be rendered based on the count in the property per 100 pixel. If you have set range (minimum, maximum, interval) and maximumLabels, then the priority goes to range only. If you haven’t set the range, then priority is considered to be maximumLabels property.
Axis label template
The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the labelTemplate property of the ChartAxis.
