ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / FlexChart Elements / FlexChart Axes Labels / Axes Labels Overlap
In This Topic
    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

    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;