Is there a hover property for Rach chart series

[suhashini]

I want to know is there  a hovering feature for rad chart.

Regards,
                 Suhashini

[Danail Vasilev]

Hello Suhashini,

RadChart doesn't support hover effects. If you want, however, to display particular tooltip when hovering over series items you can set the ActiveRegion.Tooltip property of the series item in the item data bound event. You can also integrate the RadToolTip control in this scenario. Such an example is illustrated here.

I can also suggest that you try the newer HtmlChart control that render entirely on the client as SVG instead of the obsolete RadChart. The newer controls also supports client-hover events. More information on the pros and cons of both charts can be found in RadHtmlChart vs. RadChart, round 2. Which one is right for me? blog post. You may also useful Migrating from RadChart to RadHtmlChart
set of articles that sheds more light on how to migrate the basic chart setup from RadChart to RadHtmlChart.


Regards,
Danail Vasilev
Telerik

 

 

[suhashini]

Thanks Danial ,i am using Rad manager tool tip is working fine can i assign the tool tip to the series name rather  than to the bubble chart?

[Danail Vasilev]

Hello Suhashini,

You can use the same approach from the provided online demo and set a tooltip for the ActiveRegion property of each legend item. For example:
C#:

protected void RadChart1_BeforeLayout(object sender, EventArgs e)
{
    RadChart1.Legend.Items[0].ActiveRegion.Tooltip = "Tooltip for " + RadChart1.Legend.Items[0].Name;
    RadChart1.Legend.Items[1].ActiveRegion.Tooltip = "Tooltip for " + RadChart1.Legend.Items[1].Name;
}
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //Set the TooltipZondeID on the server because the ClientID of the HTML element is needed
        RadToolTipManager1.ToolTipZoneID = RadChart1.ClientID;
        // Populate the chart
        DataTable tbl = new DataTable();
        DataColumn col = new DataColumn("Temp");
        col.DataType = typeof(int);
        tbl.Columns.Add(col);
        col = new DataColumn("Temp2");
        col.DataType = typeof(int);
        tbl.Columns.Add(col);
        col = new DataColumn("Measurement");
        col.DataType = typeof(string);
        tbl.Columns.Add(col);

        int size = 20;
        int maxLen = size.ToString().Length;
        Random r = new Random();
        for (int i = 1; i <= size; i++)
        {
            tbl.Rows.Add(new object[] {r.Next(40), r.Next(40) + 10, "Measurement " + i.ToString("D" + maxLen) });
        }

        RadChart1.DataSource = tbl;
        RadChart1.DataBind();
    }
}
protected void RadChart1_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
{
    if (e.SeriesItem.YValue > 30)
    {
        e.SeriesItem.ActiveRegion.Tooltip = "Attention! Temperature too high! " + '\n';
    }
    else if (e.SeriesItem.YValue < 10)
    {
        e.SeriesItem.ActiveRegion.Tooltip = "Attention! Temperature too low! " + '\n';
    }
    e.SeriesItem.ActiveRegion.Tooltip += ((DataRowView)e.DataItem)["Measurement"].ToString() + ": Temperature: " + e.SeriesItem.YValue;
}

ASPX:

<telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true" OnItemDataBound="RadChart1_ItemDataBound"
        Skin="Vista" Width="600px" OnBeforeLayout="RadChart1_BeforeLayout">
        <ChartTitle TextBlock-Text="Temperature">
        </ChartTitle>
        <Series>
            <telerik:ChartSeries DataYColumn="Temp" Name="Series 1" Type="Line">
                <Appearance>
                    <TextAppearance TextProperties-Font="Arial, 8.25pt">
                    </TextAppearance>
                    <PointMark Visible="True" Border-Width="2" Border-Color="DarkKhaki" Dimensions-AutoSize="false"
                        Dimensions-Height="12px" Dimensions-Width="12px">
                        <FillStyle MainColor="186, 207, 141" FillType="solid">
                        </FillStyle>
                    </PointMark>
                    <LineSeriesAppearance Width="5"></LineSeriesAppearance>
                </Appearance>
            </telerik:ChartSeries>
            <telerik:ChartSeries DataYColumn="Temp2" Name="Series 2" Type="Line">
                <Appearance>
                    <TextAppearance TextProperties-Font="Arial, 8.25pt">
                    </TextAppearance>
                    <PointMark Visible="True" Border-Width="2" Border-Color="DarkKhaki" Dimensions-AutoSize="false"
                        Dimensions-Height="12px" Dimensions-Width="12px">
                        <FillStyle MainColor="186, 207, 141" FillType="solid">
                        </FillStyle>
                    </PointMark>
                    <LineSeriesAppearance Width="5"></LineSeriesAppearance>
                </Appearance>
            </telerik:ChartSeries>
        </Series>
        <PlotArea>
            <XAxis DataLabelsColumn="Measurement">
                <Appearance>
                    <TextAppearance TextProperties-Font="Arial, 8.25pt, style=Bold">
                    </TextAppearance>
                    <LabelAppearance RotationAngle="30">
                    </LabelAppearance>
                </Appearance>
            </XAxis>
            <YAxis AxisMode="Extended">
                <Appearance>
                    <TextAppearance TextProperties-Font="Arial, 8.25pt, style=Bold">
                    </TextAppearance>
                </Appearance>
            </YAxis>
        </PlotArea>
        <Legend>
        </Legend>
    </telerik:RadChart>

 <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="Telerik"
     Width="200px" Animation="Slide" Position="TopCenter" EnableShadow="true" AutoTooltipify="true">
 </telerik:RadToolTipManager>

Regards,
Danail Vasilev
Telerik