Setting mouse pointer style on legend

[Dan]

I'm sure the answer is something simple. I am trying to set my chart's legend cursor (mouse pointer) to "default" after the chart has already been created. I can't seem to figure out the correct syntax. Your help will be greatly appreciated.Thanks in advance.

var radHtmlChartObject = $find("<%=RadHtmlChart1.ClientID %>"); //the standard control object
var kendoChart = radHtmlChartObject.get_kendoWidget(); //the Kendo widget

//Examples that work correctly

kendoChart.options.legend.position = "top";
kendoChart.options.legend.labels.background = "green";

//None of these work for me:
kendoChart.options.legend.item.cursor = "default";
kendoChart.options.legend.item.cursor.style = "default";
kendoChart.options.legend.item[0].cursor = "default";
kendoChart.options.legend.item[0].cursor.style = "default";
kendoChart.options.legend.items.cursor = "default";
kendoChart.options.legend.items.cursor.style = "default";

 

[Rumen]

Hello Dan,

You can change the cursor of the legend items via a CSS class:

<style>
    .k-chart svg path {
        cursor: default !important;
    }
</style>

or programmatically via the setOptions method as shown below:

<script>
    function OnLoad(sender, args) {
        var kendoWidget = sender.get_kendoWidget();
        var opts = kendoWidget.options;

        var itm = opts.legend.item || {};
        itm.cursor = { style: "default" };
        opts.legend.item = itm;

        kendoWidget.setOptions(opts);

        kendoWidget.redraw();
    }
</script>
<telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Skin="Silk">
    <ClientEvents OnLoad="OnLoad" />
    <PlotArea>
        <Series>
            <telerik:PieSeries>
                <SeriesItems>
                    <telerik:PieSeriesItem Name="first" Y="1" />
                    <telerik:PieSeriesItem Name="second" Y="3" />
                    <telerik:PieSeriesItem Name="third" Y="5" />
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Regards,
Rumen
Progress Telerik

[Dan]

Hi Rumen,

Thanks for the helpful information. I couldn't get the CSS example to work for me, but the second example worked perfectly.

Best wishes,

Dan

[Rumen]

You are welcome, Dan!

You mentioned that the CSS solution does not work for you, which means that it possibly won't work for other guys too.

That's why I recorded and attached a video for all of you showing how it works on my end.

Best regards,
Rumen
Progress Telerik

[bdrennen]

Is there a way to change the cursor when it's over a bar on a column series chart? I've been playing the the CSS, and the way it is right now the cursor changes any time it enters the body of the chart. I'd just like to change the cursor when it's over the bar, but I don't immediately see how to do that.

[Rumen]

Hi Bryan,

Here you are a solution for your scenario based on the client-side OnSeriesHovered event of the series:

<telerik:RadHtmlChart runat="server" ID="chart" >
         <ClientEvents  OnSeriesHover ="OnSeriesHovered " />
         <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 OnSeriesHovered(sender, args) {
             sender.element.style.cursor = "crosshair";
             sender.get_kendoWidget().redraw();
         }
     </script>

Another solution is provided by a colleague in the following StackOverflow thread https://stackoverflow.com/questions/31111665/cursor-hand-symbol-change-in-radhtmlchart-columnseries-chart, e.g.

<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) {
                 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>

Regards,
Rumen
Progress Telerik

[bdrennen]

Rumen:

Thank you! The first solution you posted works great. Quick question, however: I pasted your solution in my project and it works fine with Chrome 74, but I get the following error with IE 11:

Object doesn't support property or method 'get_kendoWidget'

I'm currently using UI for ASP.NET AJAX R1 2019 SP1 (version 2019.1.215). We only have a handful of die-hards who are still using IE, so this isn't a critical error. I was wondering if this is somehow specific to my project, or if you can duplicate it on your end.

I also had trouble getting the StackOverflow solution to work as well as your solution. I ended up increasing the timeout to 250, but I still have problems with the cursor not consistently changing when it's over the bar in the chart. This was tested on Chrome 74.

Thank you!

Bryan

[Rumen]

Hi Bryan,

Please excuse me for the JS error that breaks the solution in IE!

Here is a complete solution for all browsers:

<telerik:RadHtmlChart runat="server" ID="chart">
    <ClientEvents OnSeriesHover="OnSeriesHovered" />
    <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 OnSeriesHovered(sender, args) {
            sender.element.parentNode.setAttribute("style", "cursor: crosshair");
    }
</script>

Regards,
Rumen
Progress Telerik

[bdrennen]

Rumen:

Thank you--that works beautifully.

Bryan

[Rumen]

Great! Thank you for confirming it.

Have a nice and productive day.


Regards,
Rumen
Progress Telerik