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

2 posts, 0 answers
  1. Dhruv
    Dhruv avatar
    15 posts
    Member since:
    Nov 2011

    Posted 25 Jun 2013 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 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>

  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 27 Jun 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top