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('https://demos.telerik.com/kendo-ui/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>

See Also

• Explode Clicked Pie Chart Segments
• Highlight Clicked Line Chart Segments