ComponentOne FlexChart for UWP
Axes Labels Overlap
FlexChart > Working with FlexChart > FlexChart Elements > FlexChart Axes Labels > Axes Labels Overlap

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

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:

Property Description
Auto Hides overlapping labels.
Show Shows all labels including the overlapping ones.
Trim Trim label, if it's larger than the available width.
WordWrap Wrap label, if it's larger than the available width.

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;