Request: Options for bar value placement

[Michael]

The default of the bar series is to put the bar value inside the bar, but if the value is too wide, it gets cut off.  It needs options you can set so you can change the value rotation.  Also, it seems like the bar value should not be placed inside the bar, but outside of it (or make that an option).

I am trying to set the bar template to achieve the effect, but still have some issues with the display.  If I figure it out, I will post back here.  Here is what I have so far:

        <Style TargetType="{x:Type telerik:Bar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:Bar}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Rectangle Grid.Row="0" Stroke="Red"  VerticalAlignment="Bottom"
                                HorizontalAlignment="Stretch" StrokeThickness="1" Fill="Coral"
                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualHeight}" />
                            <TextBlock Grid.Row="0" Foreground="Black" Padding="0,0,0,5"
                                Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataPoint.YValue}">
                                <TextBlock.LayoutTransform>
                                    <RotateTransform Angle="-90" CenterX="0" CenterY="0"/>
                                </TextBlock.LayoutTransform>
                            </TextBlock>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

[Giuseppe]

Hello Michael,

Thank you for your feedback -- we will forward your remarks to our developers so they can consider them for improving the customization options for the series item labels.

At the moment we could suggest you to review the following custom bar template that places the labels on top of the series items to get you started:

<Style TargetType="{x:Type telerik:Bar}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid SnapsToDevicePixels="False" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"
                      Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:Bar}}, Path=ActualHeight}" >
                        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                               RadiusX="5" RadiusY="5"
                               StrokeThickness="2" Stroke="White" Fill="Red">
                        </Rectangle>
                        <Canvas HorizontalAlignment="Stretch">
                            <TextBlock
                                    Canvas.Top="-15"
                                    Width="{TemplateBinding ActualWidth}"
                                    TextAlignment="Center"
                                    Foreground="Black"
                                    Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataPoint.YValue}" />
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

We have also updated your Telerik points for the provided feedback.


Sincerely yours,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

Excellent, thank you!  I will give the template a try.

[Marcus Eddy]

Hi There

I am using this method of moving the label above the bar however now i am running into the issue of the label being cut off or behind the bar when the datapoint value is close the top of the auto scaling y axis i.e auto scale y axis shows 8,000,000  and the datapoint value is 7,983,100.  Is there a way since the latest release to:

a) make the auto scale of the y axis 120% of the highest datapoint allowing the series label to fit in the top or
b) as with the asp.net chart allowing the extra padding at the top of the chart area so that series labels can go above the highest y axis label

Regards Marcus

[Giuseppe]

Hi Marcus Eddy,

Unfortunately this functionality is not available in the current official version of the chart control.

However, for the Q1 2009 release scheduled for the end of February we will add the option to disable the autoscale mechanism of the axis (via setting ChartArea.AxisY.AutoScale property to false) and you will be able to manually specify the MinValue  / MaxValue / Step for the axis just like in the ASP.NET version of the control.


Sincerely yours,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jim Morris]

I have a similar problem I am trying to solve. While customizing the Bar template to show a TextBlock on top of a Rectangle does free up the text from the visible bar, the overall Bar still has a width. This means that when my data point is relatively small, the label can easily get cut off or not show at all. Is there a way to allow a TextBlock to overlap the bounds of the Bar control? Tks.

[Velin]

Hi Jim Morris,

The label issues mentioned in this thread led us to a completely new mechanism for placing labels on the chart area( introduced with the Q1.2010 release). You can see an example of it here and read more about it here. To have this functionality in your application however, you will need to upgrade to the latest official release.

Sincerely yours,
Ryan
the Telerik team