cursor hand symbol change in radhtmlchart columnseries chart - telerik

Question

Please suggest on how to show the hand symbol on mouse hover of the telerik radhtmlchart.AS of now im getting only pointer symbol on mouse hover.
<telerik:radhtmlchart runat="server" id="RadHtmlChartfirst" onclientseriesclicked="OnClientSeriesClickedfirst"
legend-appearance-position="Top" legend-appearance-visible="true" plotarea-xaxis-minorgridlines-visible="false"
plotarea-yaxis-minorgridlines-visible="false" plotarea-xaxis-majorgridlines-visible="false"
plotarea-yaxis-majorgridlines-visible="false" height="444" width="900">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="myValues1" Name="Name1">
</telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="myValues2" Name="Name2">
</telerik:ColumnSeries>
<telerik:ColumnSeries DataFieldY="myValues3" Name="Name3">
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="myLabels">
</XAxis>
</PlotArea>
<Legend>
<Appearance Visible="true" Position="Bottom" />
</Legend>
<Appearance>
<FillStyle BackgroundColor="" />
</Appearance>
<ChartTitle Text="Reviewer Utilization Report">
</ChartTitle>
</telerik:radhtmlchart>

Answer 1

There is no built-in facility for that because this chart renders SVG and the cursor styles generally apply to HTML elements. I tried the following flimsy mouse event handling and it seems to kind of work though:
<telerik:RadHtmlChart runat="server" ID="chart" onmouseout="onmouseoutHandler();">
<ClientEvents OnSeriesHover="OnSeriesHover" />
<PlotArea>
<Series>
<telerik:ColumnSeries Name="first">
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="second">
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<script>
function OnSeriesHover(e) {
document.onmouseover = null;
if (e.series.name == "first") { //consider adding some conditions or removing them at all
e.preventDefault();
setTimeout(function () {
document.body.style.cursor = "pointer"
}, 50);
}
return false;
}
//attached to onmouseout of the chart wrapper to restore the cursor
//as soon as the mouse moves on the chart
function onmouseoutHandler(e) {
document.body.onmouseover = restoreCursor;
}
//the handler that restores the cursor for the page
function restoreCursor() {
document.body.style.cursor = "";
}
//resets the cursor
document.body.onmouseover = restoreCursor;
</script>
and I had to add this CSS to ensure my body element is large enough:
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
}