This is a migrated thread and some comments may be shown as answers.

Request: Options for bar value placement

6 Answers 82 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 12 Nov 2008, 07:49 PM

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> 
 

6 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 14 Nov 2008, 04:49 PM
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.
0
Michael
Top achievements
Rank 1
answered on 14 Nov 2008, 07:55 PM
Excellent, thank you!  I will give the template a try.
0
Marcus Eddy
Top achievements
Rank 1
answered on 02 Feb 2009, 07:14 AM
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
0
Giuseppe
Telerik team
answered on 02 Feb 2009, 12:00 PM
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.
0
Jim Morris
Top achievements
Rank 1
answered on 01 Sep 2010, 07:15 PM
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.
0
Velin
Telerik team
answered on 06 Sep 2010, 01:24 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Chart
Asked by
Michael
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Michael
Top achievements
Rank 1
Marcus Eddy
Top achievements
Rank 1
Jim Morris
Top achievements
Rank 1
Velin
Telerik team
Share this question
or