Axes Labels Overlap | ComponentOne FlexChart for UWP

Axes Labels Overlap

In This Topic

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:

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:

XAML

XAML

<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.