Articles in this section
Category / Section

How to rotate and position labels efficiently in ASP.NET MVC Chart?

2 mins read

 Label Rotation:               

Axis labels can be rotated by enabling LabelRotate property of ASP.NET MVC Chart axis and assigning an angle to LabelRotateAngle property of chart axis. 

C#

            this.chartControl1.PrimaryXAxis.LabelRotate = true;
            this.chartControl1.PrimaryXAxis.LabelRotateAngle = 270;

 Label Alignment:

 Alignment of axis labels can be customized using LabelAlignment property of chart axis. The default value of this property is Center. You can also set Near and Far as values for this property.

C#

this.ChartWebControl1.PrimaryXAxis.LabelAlignment = StringAlignment.Near;

 Rotation and Center Alignment:

Applying center alignment to axis labels will place them center to axis ticks. For example, if axis labels are rotated to 90 degrees with center alignment it appears similar to the below screenshot of labels aligned at “Center”. Appearance of labels will be good with center alignment if they are rotated to 90, 180 and 270 degrees.

C#

            //Rotating Axis labels
            this.chartControl1.PrimaryXAxis.LabelRotate = true;
            this.chartControl1.PrimaryXAxis.LabelRotateAngle = 90;
 
            //Alignment for axis labels
            this.chartControl1.PrimaryXAxis.LabelAlignment = StringAlignment.Center;
 

The following is a screenshot of a Chart with the labels in Center alignment.

 

rotate chart label

 

 

 

 Rotation and Far Alignment:

Applying Far alignment to axis labels will place them after axis ticks. For example, if axis labels are rotated to 45 degrees with Far alignment it appears similar to the following screenshot of labels aligned at Far. Appearance of labels will be good with Far alignment if they are rotated between 0 to 90 degrees and 180 to 270 degrees.

C#

            //Rotating Axis labels
            this.chartControl1.PrimaryXAxis.LabelRotate = true;
            this.chartControl1.PrimaryXAxis.LabelRotateAngle = 45;
 
            //Alignment for axis labels
            this.chartControl1.PrimaryXAxis.LabelAlignment = StringAlignment.Far;

 

The following is a screenshot of a Chart with the labels in Far alignment .

Far alignment label

  

Rotation and Near Alignment:

Applying Near alignment to axis labels will place them before axis ticks. For example, if axis labels are rotated to 135 degrees with Near alignment it appears similar to the below screenshot of labels aligned at Near. Appearance of labels will be good with near alignment if they are rotated between 90 to 180 degrees and 270 to 360 degrees.

 

[C#]
            //Rotating Axis labels
            this.chartControl1.PrimaryXAxis.LabelRotate = true;
            this.chartControl1.PrimaryXAxis.LabelRotateAngle = 135;
 
            //Alignment for axis labels
            this.chartControl1.PrimaryXAxis.LabelAlignment = StringAlignment.Near;

 

 

The following is a screenshot of a Chart with the labels in Near alignment.

Near alignment

 

 

Conclusion

I hope you enjoyed learning about how to rotate and position labels efficiently in ASP.NET MVC Chart.

You can refer to our ASP.NET MVC Chart page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF FileFormat libraries example to understand how to create and manipulate data.

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

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

 

 

 

 

 

 

 

 

 

 



Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied