3 Answers, 1 is accepted
0
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
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
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

suhashini
Top achievements
Rank 1
answered on 06 Jun 2014, 01:11 PM
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?
0
Accepted
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#:
ASPX:
Regards,
Danail Vasilev
Telerik
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
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.