Highlight Clicked Bar Chart Segments
Environment
| Product Version | 2018.1 221 |
| Product | Progress® Kendo UI® Chart for jQuery |
Description
How can I highlight the clicked bar in the Kendo UI Bar Chart?
Solution
Handle the seriesClick event—in the event handler, add a custom style class to the desired HTML elements.
<style>
.myClass {
stroke: #b40524;
fill: #08ffff;
stroke-width: 3;
}
</style>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
},
seriesClick: function(e) {
$(".myClass").removeClass("myClass");
$(e.element).siblings().addClass("myClass");
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>