eesh eesh - 3 months ago 11
CSS Question

How do you switch the cursor to a pointer cursor when hovering over the bars in a Kendo UI bar chart

I have a Kendo UI Datavis Bar Chart for which I wish to show the pointer (hand) cursor when hovering over the bars in the chart and labels for those bars. When moving off the bars in the chart the cursor should return to the standard arrow pointer.

I noticed that the cursor turned into the text cursor when hovering over the axis labels (left, right, and bottom) and on the legend. So in addition to the above I would like the cursor to remain the standard cursor (arrow) when hovering over the axis labels and legend (since you cannot edit these). I would also like the cursor to switch to the pointer cursor when hovering over the x-axis (bottom) labels.

I can easily show a pointer cursor for the entire chart when hovering anywhere over the chart but that is not desired.

I have tried various strategies using the seriesHover event but so far nothing has worked.

How do I achieve the above?

Thomas your answer almost has me there. However, I need one additional piece of information:

How would I use the technique you show in your answer below within a CSS file. I have several Kendo UI charts some for which I need this behavior and some for which I do not. I have both ids and classes associated with the divs that contain the kendo UI charts (one div per chart). The actual charts are created using JavaScript code at load time. I tried to add the following, to the CSS within the CSS file but this had no effect:

#barChart {
/*cursor: pointer;*/
(svg > path):last-child {cusror: pointer;}
}


where #barChart is the Id of the div containing the KendoUI chart within the HTML

<div id="barChart" class="bargraph"></div>


Is there a way to do what you have shown below for charts that are created at load time within predefined divs? Does this have to be done by hooking into the charts hover event?

Answer

Just tried styling the Kendo UI bar chart demo with CSS; both turning the cursor into a hand and leaving it the default cursor on text works quite well. I just had to add two lines of CSS (and change the script/CSS URLs):

<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
    <style type="text/css">
      /* When hovering over a bar, Kendo dynamically adds
         a bar as the last child of the SVG element that 
         works as an overlay. So, effectively, we're
         hovering over the last (dynamically added) child */   
      svg > path:last-child {cursor:pointer;}
      svg {cursor:default}
    </style>
</head>
<body>

        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../content/shared/styles/world-map.png');"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "bar"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });
            </script>
        </div>
    <script type="text/javascript">
        console.log("hi")
        document.addEventListener("click",function(e){document.write(e.target)},false)
    </script>

</body>
</html>‚Äč

If you have multiple charts and want this behavior only for some charts, I'd suggest using classes, like

<div id="barChart" class="bargraph cursorPointer"></div>

And change the CSS like

.cursorPointer svg > path:last-child {cursor:pointer;}
.cursorPointer svg {cursor:default}

(If you want the arrow cursor on text of all graphs, omit the .cursorPointer on the second line.)