StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Just tried styling the <a href="http://demos.kendoui.com/dataviz/bar-charts/index.html" rel="nofollow">Kendo UI bar chart demo</a> with CSS; both turning the cursor into a hand and leaving it the default cursor on text <a href="http://jsfiddle.net/YK2VU/" rel="nofollow">works quite well</a>. I just had to add two lines of CSS (and change the script/CSS URLs):</p> <pre><code><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> </code></pre> <p>If you have multiple charts and want this behavior only for some charts, I'd suggest using classes, like</p> <pre><code><div id="barChart" class="bargraph cursorPointer"></div> </code></pre> <p>And change the CSS like</p> <pre><code>.cursorPointer svg > path:last-child {cursor:pointer;} .cursorPointer svg {cursor:default} </code></pre> <p>(If you want the arrow cursor on text of all graphs, omit the <code>.cursorPointer</code> on the second line.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload