Bar Label not visible when we have a zero and -ve value

[Dhruv]

We are using HorizontalBarSeriesDefinition for our application. When we have to bars, with 0 and +ve value, the labels are displayed properly. But when we use 0 and -ve value. Label for 0 value is not displayed.

Please refer to the snapshots and code attached below:


Code:

<UserControl x:Class="WpfApplication1.ChartControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
            xmlns:telerik.chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
            xmlns:telerik.charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
            d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Style x:Key="AxisXLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="1" />
        </Style>

        <Style x:Key="AxisYLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="StrokeThickness" Value="1" />
        </Style>

        <Style x:Key="AxisXStyle" TargetType="telerik.charting:AxisX2D">
            <Setter Property="AxisLineStyle" Value="{StaticResource AxisXLineStyle}" />
        </Style>

        <Style x:Key="AxisYStyle" TargetType="telerik.charting:AxisY2D">
            <Setter Property="AxisLineStyle" Value="{StaticResource AxisYLineStyle}" />
        </Style>

        <Style x:Key="RadChartDefaultStyle" TargetType="telerik.chart:RadChart" >
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="telerik:StyleManager.Theme" Value="Metro" />
        </Style>
        <Style x:Key="ChartAreaDefaultStyle" TargetType="telerik.charting:ChartArea" >
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="EnableAnimations" Value="True"/>
            <Setter Property="AxisXStyle" Value="{DynamicResource AxisXStyle}"/>
            <Setter Property="AxisYStyle" Value="{DynamicResource AxisYStyle}"/>
            <!--<Setter Property="ItemOverlapPercent"  Value="-20" />-->
            <Setter Property="ItemWidthPercent"  Value="50" />
        </Style>
        <Style x:Key="GridLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="#D7D7D7" />
            <Setter Property="StrokeThickness" Value="2" />
        </Style>
        <Style x:Key="AxisItemLabelStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="10" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="Margin" Value="0,0,3,0" />
        </Style>
        <telerik.charting:BrushCollection x:Key="ChartPaletteBrushes2" >
            <SolidColorBrush Color="#002060"/>
            <SolidColorBrush Color="#FFC000"/>
        </telerik.charting:BrushCollection>
    </UserControl.Resources>
    <Grid>
        <telerik:RadChart Grid.Row="0" Style="{DynamicResource RadChartDefaultStyle}" ItemsSource="{Binding Data}" Name="chart" LayoutUpdated="chart_LayoutUpdated">
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegendPosition="Bottom" >
                    <telerik:ChartDefaultView.ChartArea >
                        <telerik:ChartArea
                        Style="{DynamicResource ChartAreaDefaultStyle}"
                        LabelFormatBehavior="HumanReadable"
                        LegendName="Legend1"
                        PaletteBrushes="{DynamicResource ChartPaletteBrushes2}"
                        SmartLabelsEnabled="True">
                            <!--<telerik:ChartArea.Annotations>
                                <telerik.charting:CustomGridLine YIntercept="0" StrokeThickness="2" Stroke="Black" >

                                </telerik.charting:CustomGridLine>
                            </telerik:ChartArea.Annotations>-->
                            <telerik:ChartArea.AxisY >
                                <telerik:AxisY
                                AutoRange="True"
                                IsZeroBased="True"
                                PlotAreaAxisVisibility="Visible"
                                MajorTicksVisibility="Collapsed"
                                MajorGridLinesVisibility="Visible"
                                MinorTicksVisibility="Collapsed"
                                StripLinesVisibility="Collapsed">
                                    <telerik:AxisY.AxisStyles >
                                        <telerik:AxisStyles
                                        GridLineStyle="{DynamicResource GridLineStyle}"
                                        ItemLabelStyle="{DynamicResource AxisItemLabelStyle}"
                                        />
                                    </telerik:AxisY.AxisStyles>
                                </telerik:AxisY>
                            </telerik:ChartArea.AxisY>
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX
                                IsZeroBased="True"
                                MajorGridLinesVisibility="Collapsed"
                                StripLinesVisibility="Collapsed">
                                    <telerik:AxisX.AxisStyles>
                                        <telerik:AxisStyles
                                        ItemLabelStyle="{DynamicResource AxisItemLabelStyle}"/>
                                    </telerik:AxisX.AxisStyles>
                                </telerik:AxisX>
                            </telerik:ChartArea.AxisX>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                    <telerik:ChartDefaultView.ChartLegend >
                        <telerik:ChartLegend Name="Legend1" Visibility="Collapsed"/>
                    </telerik:ChartDefaultView.ChartLegend>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
            <telerik:RadChart.SeriesMappings >
                <telerik:SeriesMapping  >
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:HorizontalBarSeriesDefinition
                        TextBlock.TextAlignment="Right"
                        ItemToolTipFormat="#VAL{C0}"
                        ItemLabelFormat="#VAL{C0}"
                        SeriesItemLabelStyle="{DynamicResource ChartSeriesItemLabelStyle}"
                        ShowItemToolTips="True">
                            <telerik:HorizontalBarSeriesDefinition.Appearance >
                                <telerik:SeriesAppearanceSettings  Foreground="Black"  />
                            </telerik:HorizontalBarSeriesDefinition.Appearance>
                            <telerik:HorizontalBarSeriesDefinition.InteractivitySettings>
                                <telerik:InteractivitySettings SelectionMode="Multiple" SelectionScope="Item" />
                            </telerik:HorizontalBarSeriesDefinition.InteractivitySettings>
                        </telerik:HorizontalBarSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping FieldName="Balance" DataPointMember="YValue"/>
                        <telerik:ItemMapping FieldName="AcctCatTyp" DataPointMember="XCategory" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>
    </Grid>
</UserControl>

[Peshito]

Hello Dhruv,

There is an issue in this scenario when the horizontal bars are inverted and a bar value is equal to zero. You could however set a margin to your labels which will move them to the visible chart area. This approach is shown in the sample project attached to this thread.

Hope this helps.


Regards,
Peshito
Telerik