In case there are less number of data points and shorter label text, axis labels are rendered without any overlapping. However, axis labels may overlap due to its long text or large numbers of data points in chart.

To manage overlapped axis labels in FlexChart, use the following options.

• Trim or Wrap Axis Labels
• Staggered Axis Labels

Trim or Wrap Axis Labels

In case there are overlapping labels in the chart for any reason, you can manage the same using the OverlappingLabels property.

The OverlappingLabels property accepts the following values in the OverlappingLabels enumeration:

Here is the code snippet:

<Chart:C1FlexChart.AxisX>
    <Chart:Axis OverlappingLabels="Auto" Labels="False" LabelAngle="45" Reversed="True" 
    MajorGrid="True" MajorTickMarks="Inside" Title="Fruits" AxisLine="True" Position="Bottom"></Chart:Axis>
</Chart:C1FlexChart.AxisX>
<Chart:C1FlexChart.AxisY>
    <Chart:Axis OverlappingLabels="Show" Reversed="True" Min="0" Max="8" MajorGrid="True" 
    MajorTickMarks="Inside" AxisLine="True" Position="Right"></Chart:Axis>
</Chart:C1FlexChart.AxisY>

Staggered Axis Labels

Another way to handle overlapping of axis labels is to stagger them for better visibility. Staggered axis labels can generated by using StaggeredLines property. This property accepts an integer value and the default value is set to 1.

// Set StaggeredLines property
flexChart1.AxisX.StaggeredLines = 2;