Display Icon after each bar

[vijay]

 

Hi All,

I have a requirement to display the icon after the each bar(HorizontalStackedBar100SeriesDefinition).

Please find the attached image. the same functionality achieved in flux as showing in the image.

Can you please send the solution as soon as possible?

I tried placing the icon after the each bar by taking a stack panel separately and added the icons basing on chart count it is fine but it is not looking good with different resolutions and not aligned correctly..

Thanks
-Vijay Kommalapati

[vijay]

I achived the same functionility for bubble chart by changing the control template as show...but not able to fidn the solution for 100 stackbar series

<system:String x:Key="BubbleData">M70.5,140.5 L70.6,140.5 70.6,140.6 70.5,140.6 z M140.5,70.5 L140.6,70.5 140.6,70.6 140.5,70.6 z M0.5,70.5 L0.6,70.5 0.6,70.6 0.5,70.6 z M70.5,5 C91.4,5 110.1,14.8 122.07,30.1 123.5,32 107.9,60.5 79.7,73.5 47.7,88.3 5,80.8 5,70.5 5,34.3 34.3,5 70.5,5 z M70.5,0.5 L70.6,0.5 70.6,0.6 70.5,0.6 z</system:String>

<LinearGradientBrush x:Key="BubbleMaskBrush"  EndPoint="0,0.7" StartPoint="0,0" MappingMode="RelativeToBoundingBox">

    <GradientStop Color="#7fffffff"/>

    <GradientStop Color="Transparent" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BubbleMaskStroke" EndPoint="1,0.4" StartPoint="0,0.6">

    <GradientStop Color="#66FFFFFF" Offset="0.05"/>

    <GradientStop Color="Transparent" Offset="1"/>

    <GradientStop Color="Transparent" Offset="0.002"/>

    <GradientStop Color="Transparent" Offset="0.431"/>

</LinearGradientBrush>

<system:Double x:Key="BubbleMaskStrokeThickness">1</system:Double>



<Style x:Key="CustomBubble"

    TargetType="telerik:Bubble">

    <Setter Property="Template" >

        <Setter.Value>

            <ControlTemplate TargetType="telerik:Bubble">

                <Canvas RenderTransformOrigin="{TemplateBinding RelativeCenterPoint}" x:Name="PART_MainContainer">

                    <Path x:Name="PART_BubbleElement"

                        Data="{TemplateBinding ItemGeometry}"

                        Style="{TemplateBinding ItemStyle}" />

                    <Path Stretch="Fill"

                        Canvas.Left="{TemplateBinding Left}"

                        Canvas.Top="{TemplateBinding Top}"

                        Width="{TemplateBinding Diameter}"

                        Height="{TemplateBinding Diameter}"

                        Data="{StaticResource BubbleData}"

                        Fill="{StaticResource BubbleMaskBrush}"

                        Stroke="{StaticResource BubbleMaskStroke}"

                        StrokeThickness="{StaticResource BubbleMaskStrokeThickness}" />

                    <Ellipse Width="25" Height="25" x:Name="RectSV"      Canvas.Left="{TemplateBinding Left}"   Canvas.Top="{TemplateBinding Top}" >     <Ellipse.Fill>     <ImageBrush x:Name="BblImageSV" ImageSource="../Images/ico_specialityvisit2.png" ></ImageBrush>     </Ellipse.Fill>     </Ellipse>

                </Canvas>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

[Petar Marchev]

Hello Vijay,

Thank you for the attached screenshot and XAML.

If I have understood you correctly - you want to place these icons just outside of the chart area but keep the icon parallel to the corresponding bar. Unfortunately there is no way to achieve this out-of-the-box and you will need to handle this manually. Your idea with a stack panel seems very witty and I suggest you keep working in that direction.

All the best,
Petar Marchev
the Telerik team

[vijay]

Hi Team,

Any Update on this??

i was achived this functionality by creating out side but it was not professionl and accurate.

if any chnages on latest versions Please provide the solution.

thanks
-Vijay

[Petar Marchev]

Hi Vijay,

We have not extended the functionality of the RadChart to fit such a scenario.   

Regards,
Petar Marchev
the Telerik team