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.
bubble in Bubble Chart. Is it possible to place image
on bubbles.
For More clarification, check out the attached image.
4 Answers, 1 is accepted
0
Hello Rahul,
Unfortunately such behavior is not achievable out of the box with RadChart.
Greetings,
Sia
the Telerik team
Unfortunately such behavior is not achievable out of the box with RadChart.
Greetings,
Sia
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
0
Rahul
Top achievements
Rank 2
answered on 16 Aug 2011, 07:48 PM
Hi Sia,
is there no any other way to achieve this result.
is there no any other way to achieve this result.
0
Accepted
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:
All the best,
Sia
the Telerik team
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
0
Rahul
Top achievements
Rank 2
answered on 19 Aug 2011, 05:00 PM
Thanks Sia,
I really appreciate your efforts for giving solution. I will try this out and let you know.
Thanks once again.
I really appreciate your efforts for giving solution. I will try this out and let you know.
Thanks once again.