LiveCharts Data point labels overlap

527 views Asked by At

Is it possible to style the data labels to stop them overlapping? In the middle, two data points are overlapping and on the last data point (190) is hidden behind the column.

That's what I'm using:

            <Label Name="GraphTitleLabel" Padding="0" Content="Plot Name Details" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" FontWeight="SemiBold" />
            <lvc:CartesianChart Name="chart" Grid.Row="1" Grid.Column="0" Series="{Binding seriesCollection}" LegendLocation="Bottom" Background="WhiteSmoke" BorderBrush="Black" BorderThickness="0.5" Padding="0"
                            Zoom="None" Pan="X" MouseDoubleClick="chartResetZoom_MouseDoubleClick" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" >
            <lvc:CartesianChart.DataTooltip>
                <lvc:DefaultTooltip SelectionMode="OnlySender" />
            </lvc:CartesianChart.DataTooltip>
            <lvc:CartesianChart.ChartLegend>
                <lvc:DefaultLegend BulletSize="9" FontSize="12" Typography.Capitals="AllSmallCaps" />
            </lvc:CartesianChart.ChartLegend>
            <lvc:CartesianChart.AxisX >
                <lvc:Axis Name="XAxis" Title="" Labels="{Binding Labels}"  LabelsRotation="0" Foreground="Black" >
                    <lvc:Axis.Separator>
                        <lvc:Separator Name="LabelSeparator"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY >
                    <lvc:Axis Foreground="DarkBlue" Title="Title 1" FontSize="12">
                    <lvc:Axis.Separator>
                        <lvc:Separator Name="OneSeparator"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
                <lvc:Axis Name="Y2AxisName" Foreground="DarkRed" Title="Axis Two"            Position="LeftBottom" FontSize="12">
                    <lvc:Axis.Separator>
                        <lvc:Separator Style="{StaticResource CleanSeparator}"></lvc:Separator>
                    </lvc:Axis.Separator>

                </lvc:Axis>
                    <lvc:Axis  Name="Y3AxisName"   Foreground="DarkGoldenrod" Title="Length" Position="RightTop" FontSize="12"/>
            </lvc:CartesianChart.AxisY>

        </lvc:CartesianChart>

enter image description here

Thank you.

0

There are 0 answers