How to highlight rad bubble chart series

Thread is closed for posting
6 posts, 1 answers
  1. suhashini
    suhashini avatar
    11 posts
    Member since:
    May 2014

    Posted 23 May 2014 Link to this post

    Hi 
       How to highlight radchart series on mouse over.Please Help !..
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 May 2014 in reply to suhashini Link to this post

    Hi suhashini,

    Please try the below CSS to highlight the BubbleSeriesItem  of a chart on mouse over.

    CSS:
    circle:hover
    {
        fill: red !important;
    }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. suhashini
    suhashini avatar
    11 posts
    Member since:
    May 2014

    Posted 23 May 2014 in reply to Princy Link to this post

    Hi Princy,
                       Its not working any other solution.

  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 May 2014 in reply to suhashini Link to this post

    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.
  6. suhashini
    suhashini avatar
    11 posts
    Member since:
    May 2014

    Posted 26 May 2014 in reply to suhashini Link to this post

    Is there any way to highlight active region of bubble chart when tooltip is pointed?
  7. suhashini
    suhashini avatar
    11 posts
    Member since:
    May 2014

    Posted 26 May 2014 in reply to Princy Link to this post

    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>

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017