Image on each Bubble of Bubble Chart.

[Rahul]

We want to place one small image at corner of each
bubble in Bubble Chart. Is it possible to place image
on bubbles.

For More clarification, check out the attached image.

[Sia]

Hello Rahul,

Unfortunately such behavior is not achievable out of the box with RadChart.

Greetings,
Sia
the Telerik team

[Rahul]

Hi Sia,
is there no any other way to achieve this result.

[Sia]

Hello Rahul,

You can set a custom template with image inside but you cannot position it precisely.  Please try this style where I have added a rectange with red background which you need to replace with image:

<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}" />
                    <Rectangle Width="10" Height="10" Fill="Red"
                                Canvas.Left="{TemplateBinding Left}"
                                Canvas.Top="{TemplateBinding Top}"/>
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                        </Canvas.RenderTransform>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

All the best,
Sia
the Telerik team

[Rahul]

Thanks Sia,
I really appreciate your efforts for giving solution. I will try this out and let you know.
Thanks once again.