cursor hand symbol change in radhtmlchart columnseries chart

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>

score 0 · Answer 1 · answered Jun 30 '15 at 13:35

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;
        }

Its not working for me ... please help me in fixing this as client needs hand symbol because it is kind of drilldown chart. — Hari Haran, Jul 01 '15 at 05:20
What is your Telerik version? I used the latest. Probably a year ago the events of the chart changed a bit. Upgrade or review the available properties for something similar. OnClientSeriesHovered sounds probable for the old name — rdmptn, Jul 01 '15 at 05:43
Here is the same approach from the telerik forums. It seems to use the old events as the thread is old http://www.telerik.com/forums/hand-cursor-on-series-for-drilldown — rdmptn, Jul 01 '15 at 05:46

cursor hand symbol change in radhtmlchart columnseries chart

1 Answers1