This is a migrated thread and some comments may be shown as answers.

Setting mouse pointer style on legend

9 Answers 63 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 30 Jan 2019, 10:01 PM

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

 

9 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 04 Feb 2019, 10:58 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dan
Top achievements
Rank 1
answered on 04 Feb 2019, 08:32 PM

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

0
Rumen
Telerik team
answered on 05 Feb 2019, 09:14 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
bdrennen
Top achievements
Rank 1
answered on 23 May 2019, 09:49 PM

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.

0
Rumen
Telerik team
answered on 28 May 2019, 03:25 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
bdrennen
Top achievements
Rank 1
answered on 28 May 2019, 04:24 PM

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

0
Rumen
Telerik team
answered on 29 May 2019, 01:31 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
bdrennen
Top achievements
Rank 1
answered on 29 May 2019, 05:46 PM

Rumen:

Thank you--that works beautifully.

Bryan

0
Rumen
Telerik team
answered on 30 May 2019, 09:51 AM
Great! Thank you for confirming it.

Have a nice and productive day.


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart (HTML5)
Asked by
Dan
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Dan
Top achievements
Rank 1
bdrennen
Top achievements
Rank 1
Share this question
or