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

[Solved] How to highlight rad bubble chart series

5 Answers 173 Views

Chart (Obsolete)

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

5 Answers, 1 is accepted

Accepted

answered on 26 May 2014, 04:47 AM

Hi suhashini,

Please have a look into the sample code snippet to change the fill color and border color of the BubbleSeriesItem on mouse over.

ASPX:

<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="800" Height="500" Transitions="true">

<PlotArea>

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<XAxis AxisCrossingValue="65" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside" Reversed="false" MinValue="65" MaxValue="85" Step="5">

<TitleAppearance Position="Center" RotationAngle="0" Text="Life Expectancy">

</TitleAppearance>

</XAxis>

<YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"

MaxValue="5" MinorTickSize="1" MinorTickType="Outside" MinValue="1" Reversed="false" Step="1">

<TitleAppearance Position="Center" RotationAngle="0" Text="Fertility Rate">

</TitleAppearance>

</YAxis>

<Series>

<telerik:BubbleSeries Name="North America">

<Appearance FillStyle-BackgroundColor="#add8e6">

</Appearance>

<TooltipsAppearance Color="White" DataFormatString="Country: {3}<br />Life Expectancy: {0}<br />Fertility Rate: {1}<br />Region: North America<br />Population: {2}" />

<SeriesItems>

<telerik:BubbleSeriesItem Size="33739900" X="80.66" Y="1.67" Tooltip="CAN" />

<telerik:BubbleSeriesItem Size="307007000" X="78.09" Y="2.05" Tooltip="USA" />

</SeriesItems>

</telerik:BubbleSeries>

<telerik:BubbleSeries Name="Middle East">

<Appearance FillStyle-BackgroundColor="#328fae">

</Appearance>

<TooltipsAppearance Color="White" DataFormatString="Country: {3}<br />Life Expectancy: {0}<br />Fertility Rate: {1}<br />Region: Middle East<br />Population: {2}" />

<SeriesItems>

<telerik:BubbleSeriesItem Size="79716203" X="72.73" Y="2.78" Tooltip="EGY" />

<telerik:BubbleSeriesItem Size="73137148" X="72.49" Y="1.7" Tooltip="IRN" />

<telerik:BubbleSeriesItem Size="31090763" X="68.09" Y="4.77" Tooltip="IRQ" />

<telerik:BubbleSeriesItem Size="7485600" X="81.55" Y="2.96" Tooltip="ISR" />

</SeriesItems>

</telerik:BubbleSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

CSS:

<style type="text/css">

circle:hover

{

fill: red !important;

stroke: Black !important;

stroke-width: 3 !important;

}

</style>

Thanks,
Princy.

answered on 26 May 2014, 05:53 AM

hi Pricy,
I am using rad obsolete chart or rad html chart and i am biding my series dynamically i am using radtootip manager to show rad series i am pasting my aspx code.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="cbYearsWorked">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel2" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<asp:Panel ID="Panel2" runat="server">
<div id="performancechart" data-win-control="Telerik.UI.RadChart">
<table>
<tr>
<td colspan="7">
<telerik:RadChart ID="RadChartSSW" runat="server" Height="450px" Skin="Blue" IntelligentLabelsEnabled="true"
AutoLayout="true" AutoTextWrap="true" Width="1300px">
<Legend Visible="false"></Legend>
<ChartTitle TextBlock-Visible="false">
</ChartTitle>
</telerik:RadChart>
<telerik:RadToolTipManager ID=
"RadToolTipManager1" runat="server"
Width="300px" Animation="Slide" Position="TopCenter" EnableShadow="true" AutoTooltipify="true" AutoCloseDelay="0" MouseTrailing="true" >
</telerik:RadToolTipManager>

<asp:Panel ID="Panel1" runat="server" BackColor="#DCDCDC" Style="width: auto; height: auto;">
<asp:Literal ID="LiteralText" runat="server" Text="" Visible="false">
</asp:Literal>
</asp:Panel>
</td>
</tr>

</table>
</div>
</asp:Panel>